HTML table set one column width while the rest of the columns fit the content while the table width is set to auto

0
votes

I have a parent container with a 1280px width and overflow set to auto. The child of this element is a table with 14 columns and I want each of the columns to fit the content with white-space set to nowrap. This will stretch the table to be wider than the parent container's width and a scroll bar will show up. But I want one column to have a fixed width of 400px and set the white-space to normal so that the text content will wrap if it's wider than 400px. How can I achieve this?? I've played with table-layout: fixed, but without hardcoding the table width, I can't set the column width.

2
htmlcssresponsive
could you please add your code? Actual code is better than a story about your code – zgood

2 Answers

0
votes

the simpliest i see would be to reset display, since it is about white-space everywhere but for one column or even a single cell somewhere, this column or cell will be at least one line of text, it should not be noticed much.

3 examples below

table {
  table-layout:fixed;/* or not */
}
td {
  white-space:nowrap;
  border:solid;
  background:lightgreen;
}
table:first-of-type td:first-child,/* first example */
table + table  td:nth-child(2) ,/* second example , another column selected */
table + table + table   td:nth-child(5) /* third example, 2 columns BUT NOT side by side */{
  display:block;
  width:100px;
  white-space:normal;
  background:lightblue;
}
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>
<table>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR Mlhb ZRRZ RzR lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
  <tr>
    <td> lkzeR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR fgdft </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
    <td> lkzeR Mlhb ZRRZ RzR </td>
  </tr>
</table>

a cell displayed as a block is not part of the table-layout behavior anymore,so you can size it or set min or max size . (it was a way to mimic flex or grid years ago )

for the curiosity of the table-layout behavior when partially broken :

table,
td {
  border: solid;
}

td {
  padding: 0.5rem
}

.block {
  display: block;
}

.block+.block {
  margin-top: 3px;
}
<table>
  <tr>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
    <td class="block"> cell turned into block</td>
    <td class="block"> cell turned into block</td>
    <td>cell</td>
  </tr>
</table>
-1
votes

If that column has an id, then maybe try this

<!-- your code for table -->
<script>
    var i = document.getElementById("column-id");
    i.style.width = "400px";
    i.style.whiteSpace = "normal";
</script>

That is what I would try, and I hope this helps.