Как получить 2 ячейки таблицы одинаковой длины с разным количеством текста? - PullRequest
Новая
       74

Как получить 2 ячейки таблицы одинаковой длины с разным количеством текста?

0 голосов
/ 07 апреля 2020

Я пытаюсь создать ключ для таблицы данных, которую я создал.

Я хочу, чтобы ключ динамического размера занимал самые правые 20% экрана. Я также хочу, чтобы все ячейки таблицы были одинаковой длины и растягивались по всей клавише (20% / 2 = 10% экрана).

Если текст длиннее 10% экрана (или 50% таблицы), я хочу, чтобы он был обрезан в конце первой строки, чтобы он не искажал клавишу.

Я собираюсь стилизовать пустые тд в css и дать им цвета фона, а другие тд опишут, что этот цвет представляет в моей таблице данных (как ключ на карте). Моя проблема в том, что когда я пытаюсь запустить этот код, пустой тд сокращается, чтобы показать текст другого тд в строке.

Как мне предотвратить это и заставить оба тд всегда быть такой же длины? 

.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>

1 Ответ

2 голосов
/ 07 апреля 2020

Вы должны установить ширину таблицы (а не div, обертывающую ее) и стиль table-layout: fixed.

Я упростил ваш код, удалив div и добавив класс key непосредственно в элемент таблицы. 

.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>

Для дальнейшего объяснения, проверьте это сообщение переполнения стека: { ссылка }

...