CODEWITHSUNDEEP
htmlcss
Rob Sedgwick
Rob Sedgwick

Reputation: 4514

Html table tie column widths together

I have a table with a fixed number of columns. I would like 3 of the columns to have the same width, but I don't know what it is, as I don't know the width of the other 2. I want the browser to render it as best it can with the one constraint that my three designated columns all have the same width,

Here's an example. I would like columns 2,3,4 all to have the same width, I don't mind what it is, just that they are the same.

<table>
  <tr>
    <td>Could be short or maybe it could be long</td>
    <td class="samewidth">Col2 Long Text</td>
    <td class="samewidth">Col3 Some More Long Text</td>
    <td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
    <td>Could be short or long</td>
  <tr>
</table>

I can only do something like I want by having a fixed percentage

td.samewidth {
  width: 25%;
  overflow: hidden;
}

Here's a fiddle with the best I could do which ties the three columns to have a width of 25%.

https://jsfiddle.net/GrimRob/zugnyzb4/

What I ideally want to do is get rid of width: 25% and put something in its place, but what?

Upvotes: 0

Views: 78

Answers (2)

smrubin
smrubin

Reputation: 551

Hard to arrive at a set answer for your question, since I am not exactly sure how you want the columns to resize based on content. Flexbox could be an alternative for you. Here is the CSS and a Codepen illustrating, to as best I understood, what you are trying to accomplish.

table {
  width: 100%;
  border: 1px solid black;
}

tr {
  display: flex;
}

td {
  border: 1px solid black;
}

td.samewidth {
/*   width: 25%; */
  overflow: hidden;
  flex-grow: 1;
  display: inline-block;
  flex-basis: 0;
}

td:not(.samewidth) {
  flex-basis: content;
}

http://codepen.io/anon/pen/bpobGq

In this example, columns 1 and 5 (not samewidth) determine width based off of the content provided. Columns with the .samewidth class, will grow evenly to fill up the remaining space available in the parent container (in this case the tr).

You really have a lot of options here with how you'd want the columns to resize. You could set a fixed width for columns 1 and 5, size off of content (as in example), or have those grow to fill up space as well. Hopefully this gets you on the right path.

Here's a quick guide on Flexbox. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

puzzler
puzzler

Reputation: 246

Do it like this:

td.samewidth {
  width: 33%;
  overflow: hidden;
}

<table>
  <tr>
    <td>Could be short or maybe it could be long</td>
    <td>
      <table>
        <tr>
          <td class="samewidth">Col2 Long Text</td>
          <td class="samewidth">Col3 Some More Long Text</td>
          <td class="samewidth">Col4 Some More Long Text and a bit more on top</td>
         </tr>
      </table>
    </td>
    <td>Could be short or long</td>
  </tr>
</table>

Since your "samewidh" columns will be 33% fixed, you won't have trouble with other rows misaligning. At most you'll have to add !important.

Upvotes: 1

Related Questions