Тд равной ширины, причем один тд уже - PullRequest
Новая
       5

Тд равной ширины, причем один тд уже

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

У меня есть таблица, и я хочу, чтобы все столбцы имели одинаковую ширину (независимо от содержимого), кроме последнего, который должен быть на 20px уже первых двух.

td:nth-child(3) { width: calc(100% - 20px); } breaks макет, к сожалению.

Мне известны подобные вопросы (CSS cal c не работает для width ), но, к сожалению, никакого рабочего решения не дано. Разве это не возможно с чистым CS ?? 

table {
  width: 100%;
  table-layout: fixed;
}
td { border: 1px solid red; }

td:nth-child(1) { width: 100%; }
td:nth-child(2) { width: 100%; }
td:nth-child(3) { width: calc(100% - 20px); }
<table>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>3</td>
  </tr>
</table>

1 Ответ

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

Вы можете использовать max-content для одной строки:

, чтобы применить ширину самого широкого значения td из третьего столбца. Для этого потребуется JavaScript.

. 

table {
  width: 100%;
  table-layout: fixed;
}

td {
  border: 1px solid red;

}

td:nth-child(3) {
    width:max-content ;
}
<table>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>3</td>
  </tr>
</table>
<hr>
<table>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>333</td>
  </tr>
</table>

Вот возможный подход JavaScript: 

var bigW = "0";
var myTable = document.querySelector("table#test");
myTable.style.width = "auto"; //remove width 

for (let td3 of document.querySelectorAll("td:last-of-type")) { // check width of last td in each row
  td3W = td3.offsetWidth; // get width
  if (td3W > bigW) { // is it the biggest value ?
    bigW = td3W;
  }
  document.documentElement.style.setProperty("--myW", bigW + "px"); // update css var()
  myTable.style.width = "100%"; //reset width
}
table {
  width: 100%;
  table-layout: fixed;
}

td {
  border: 1px solid red;
}

td:last-of-type {
  width: var(--myW, 2em);/* if var not set, then use default value*/
}
<table id="test">
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>3</td>
  </tr>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>32 12</td>
  </tr>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>3333333333</td>
  </tr>
  <tr>
    <td>l</td>
    <td>lol</td>
    <td>3</td>
  </tr>
</table>
...