1

Is it possible to make some cells not affect the width of a column but leave other cells to decide the width?

So far, the answers I've seen are table-layout: fixed but AFAIK, table-layout: fixed requires knowing the size of cells. I don't know the size of cells. I just know certain cells may be too large. So, I want the layout to work as though the content in certain cells didn't exist for width. Then I want to put content in those cells with overflow: hidden

Example:

+----+----+----+----+----+
| A1 | A2 | A3 | A4 | A5 |
+----+----+----+----+----+
| B1 | .. | B3 | B4 | B5 |
+----+----+----+----+----+
| C1 | C2 | C3 | C4 | C5 |
+----+----+----+----+----+

I don't know what content will appear in A1-A5, B1, B3-B5, C1-C5. I want the table to lay it self out like it would if there was no content at ..

But, I actually want to put content in .. and have it overflow: hidden in case it happens to be too wide

this Q seems related but starts with a specified width. I'm looking for a solution that doesn't specify a width.

gman
  • 100,619
  • 31
  • 269
  • 393

1 Answers1

0

This seems to work

In the cell(s) that you want to not affect the width, double wrap the content in divs

<td><div class="no-width">content</div></td>

Then use this css

.no-width {
  width: 0;
  min-width: 100%;
  overflow: hidden;
}

Example:

table { border-collapse: collapse; }
td { border: 1px solid black; }

.no-width {
  width: 0;
  min-width: 100%;
  overflow: hidden;
}
<div class="cols">
<table>
 <thead>
  <tr><td>Name</td><td>$</td></tr>
 </thead>
 <tbody>
  <tr><td>Bob</td><td>3</td></tr>
  <tr><td>Jim</td><td>7</td></tr>
  <tr><td><div class="no-width">Alongalongalongname</div></td><td>4</td></tr>
  <tr><td>Jane</td><td>9</td></tr>
  <tr><td>Elly</td><td>6</td></tr>
  <tr><td>Cat</td><td>5</td></tr>
  <tr><td>Alice</td><td><div class="no-width">5444444444444444444</div></td></tr>
  <tr><td>Bradly</td><td>9</td></tr>
  <tr><td>Tammy</td><td>63</td></tr>
  <tr><td><div class="no-width">tootoolong</div></td><td><div class="no-width">alsotoolong</div></td></tr>
  <tr><td>Tom</td><td>5</td></tr>
 </tbody>
</table>
gman
  • 100,619
  • 31
  • 269
  • 393