0

I am trying to create a key for a data table I made.

I want the key to be dynamically sized to take up the rightmost 20% of the screen. I also want all the table cells to be the same length and stretch across the entire key (20% /2 = 10% of the screen).

If the text is longer than 10% of the screen (or 50% of the table), I want it to be clipped at the end of the first line so that it doesn't distort the key.

I am going to style the empty td's in css and give them background colors, and the other td's will describe what that color represents in my data table (like a key on a map). My problem is, when I try to run this code, the empty td shrinks in order to show the text of the other td in the row.

How do I prevent this and force both of the td's to always be the same length? 

.key {
  float: right;
  border-style: double;
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
}

.key td {
  width: 10vw;
  border: 1px solid #003C63;
}
<div class="key">
  <table>
    <tr>
      <td></td>
      <td> = all times</td>
    </tr>
    <tr>
      <td></td>
      <td> = some times</td>
    </tr>
    <tr>
      <td></td>
      <td> = no times</td>
    </tr>
  </table>
</div>
Nate
  • 54
  • 8
  • I made you a snippet - Can you show some content that breaks your rules? – mplungjan Apr 07 '20 at 06:40
  • I just added a border around the table cells which makes it easier to visualize. Try running the snippet and then changing the size of your browser. You can see that the left table cell shrinks in size as the window shrinks, whereas I want both the cells to stay the same proportional size and the right table cell's text overflow to be hidden. – Nate Apr 07 '20 at 06:49
  • Hmm, think of minwidth, maxwidth and perhaps calc. – mplungjan Apr 07 '20 at 06:51

1 Answers1

2

You have to set the width of the table (not the div wrapping it) and the table-layout: fixed style.

I simplified your code by removing the div and add the key class directly to the table element.

.key {
  float: right;
  border-style: double;
  width: 20vw;
  table-layout: fixed; /* <------- added */
  white-space: nowrap;
  overflow: hidden;
}

.key td {
  width: 10vw;
  border: 1px solid #003C63;
}
<table class="key">
  <tr>
    <td></td>
    <td> = all times</td>
  </tr>
  <tr>
    <td></td>
    <td> = some times</td>
  </tr>
  <tr>
    <td></td>
    <td> = no times</td>
  </tr>
</table>

For further explication, check out this Stack Overflow post: https://stackoverflow.com/a/17358739/6691953

Uchendu
  • 1,016
  • 12
  • 20