0

I have searched for quite a bit in stackoverflow and google. But failed to find a solution. I have a 11 column table, of which the first column can get long text (without spaces). I have adapted to colgroup approach but it is not working for me.

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
}

.ten {
  width: 100px;
  overflow: hidden;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>

table output

I need to have a fixed width table. And I am looking for a solution where i can wrap the text. I tried with word-wrap: break-word; but it gives me the exact output. Any help is much appreciated.

Solutions I have tried:

Word-wrap in an HTML table

how-do-i-wrap-text-with-no-whitespace-inside-a-td

Ori Drori
  • 183,571
  • 29
  • 224
  • 209
tt_pre
  • 147
  • 8

2 Answers2

1

The <colgroup> element can only apply the following style properties (see spec) to the <td> elements:

  • border
  • background
  • width
  • visibility

In this case, you can use the :first-child pseudo-selector to limit the overflow of the first <td> element of each row.

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
}

.ten {
  width: 100px;
}

td:first-child {
  word-wrap: break-word;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • Correct me if I am wrong: if I want text wrapping, then i need to write td:*-child for each one (or the ones I want). – tt_pre May 30 '20 at 12:33
  • You can always apply them to all td's (like the accepted answer), or use `td:nth-child()` to apply it to a specific column. – Ori Drori May 30 '20 at 12:35
0

Use word-wrap: break-all instead:

.mytable {
  table-layout: fixed;
  width: 1000px;
}

th,
td {
  padding: 5px;
  word-break: break-all;
}

.ten {
  width: 100px;
  overflow: hidden;
}

.others {
  font-size: 13px;
}
<table border=1 class="mytable">

  <colgroup>
    <col class="ten" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
    <col class="others" />
  </colgroup>

  <thead>
    <tr>
      <th>VERY LONG COLUMN</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>G</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>

    </tr>
  </thead>
  <tbody>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
    <tr>
      <td>looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td>
      <td>not so long</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
      <td>small</td>
    </tr>
  </tbody>
</table>
agrm
  • 3,735
  • 4
  • 26
  • 36