Tuesday, July 13, 2021

[CSS][Resolved] html table force no line break and td keep width

<style>

table {table-layout: fixed; width:300px}

td {

  white-space: nowrap;

  overflow:hidden;

  /*text-overflow: ellipsis; */

}

</style>


<table>

<tr>

    <td width="100px">

     a a a  a a a  a a a a  a a a a  a a a a  a a a  a a a a  a a a a  a a a a  a a a  a a a a  a a a a  a a a a  a a a  a a a a  a a a a a a a a  a a a  a a a a  a a a a  a

    </td>

    <td width="100px">b b b b b</td>

</tr>

<tr>

    <td>ccc c c c c  c c c</td>

    <td>ddddd </td>

</tr>

</table>


Points:

you have you set table layout as fixed and set a width to it.

and then set white-space: nowrap; for no line break,

overflow:hidden; for hide the text outside the td wrapper.


reference:

https://stackoverflow.com/questions/509711/why-does-overflowhidden-not-work-in-a-td

No comments :

Post a Comment