CODEWITHSUNDEEP
htmlcssword-wrapcss-tables
Atlas23250
Atlas23250

Reputation: 177

Word wrap in table changes cell size

I have a table with 2 columns, one of which has word-wrap: break-word:

table {
    table-layout: fixed;
    width: 100%;
    border: 1px dotted gray;
}

table td {
    border: 1px solid blue;
}

table td:nth-child(2) {
    word-wrap: break-word;
}
<table>
    <tr>
        <td>Column1</td>
        <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
    </tr>
</table>

I'd like to keep the first column's width to a minimum, and the second column expanding to fit the rest of the table.

But word-wrap: break-word only works if I set table-layout: fixed and that forces all columns to have equal dimensions. How can I achieve what I want without explicitly setting a width value on the first column?

Upvotes: 0

Views: 1266

Answers (2)

Chaya Sandamali
Chaya Sandamali

Reputation: 667

You can achieve that using the width attribute of the <td> like below.

table {
  table-layout: fixed;
  border: 1px dotted gray;
}
table td {
  border: 1px solid blue;
}
table td:nth-child(2) {
  word-wrap: break-word;
  width: 100%;
  max-width: 1px;
}
<table>
  <tr>
    <td>Column1</td>
    <td>Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2Column2</td>
  </tr>
</table>

Upvotes: 1

user4257136
user4257136

Reputation:

Just add a single bit of css,code is displayed under,try it 

table td {
border: 1px solid blue;
}

table td:nth-child(1) {
width:100px;   //your value
}

table td:nth-child(2) {
word-wrap: break-word;
}

Hope this will enough for you

Regds..

Upvotes: 0

Related Questions