Гибкий стол в соответствии с размером ячейки - PullRequest
Новая
       21

Гибкий стол в соответствии с размером ячейки

0 голосов
/ 20 ноября 2018

У меня есть такие таблицы: 

   ------------------------------------------------
  |   product-name                   | icon | text |
   ------------------------------------------------
  |   product-info                   | icon | text |
   ------------------------------------------------

Я хочу, чтобы мои ячейки были гибкими в соответствии с содержимым последней ячейки: 

   ------------------------------------------------
  |   product-name                      | ic | smt |
   ------------------------------------------------
  |   product-info                      | ic | smt |
   ------------------------------------------------

   -------------------------------------------------
  |   product-name                | icon | big-text |
   -------------------------------------------------
  |   product-info, bla bla bla...| icon | text     |
   -------------------------------------------------

Я попробовал этот css: 

  table {
    table-layout: fixed;
    font-size: 12px;
    width: 100%;
  }

  table td:nth-child(1) {
    max-width: 70%;
  }

  table td:nth-child(2) {
    width: 10%;
  }

  table td:nth-child(3) {
    max-width: 20%;
  }

Я поставил table-layout:fixed, но мне не удается заставить работать максимальную ширину.И я не знаю, как сказать, что последняя ячейка является той, которая определяет размер других.

Содержание product-info может быть очень большим, и я применил многоточие, оно стало слишком большим.

1 Ответ

0 голосов
/ 20 ноября 2018

Первое, что нужно сделать, это избавиться от table-layout: fixed, потому что это противоположно тому, что вы хотите.В остальном, если вы хотите, чтобы таблицы были гибкими, не пытайтесь навязывать им ширину!

Есть небольшая хитрость, чтобы сделать некоторые ячейки таблицы такими же широкими, как и их содержимое, оставляя оставшиеся ячейки остальными.оставшегося пространства: сделайте их шириной 1px и убедитесь, что они не могут переноситься, установив white-space: nowrap.Тогда все остальное придет естественно. 

table {
  border: 1px outset;
  width: 100%;
}

th, td {
  border: 1px inset;
}

table td:nth-child(2),
table td:nth-child(3) {
  white-space:nowrap;
  width: 1px;
}
<table>
  <tr>
    <td>product-name</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
  <tr>
    <td>product-info</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
</table>
<br>
<table>
  <tr>
    <td>product-name</td>
    <td>icon</td>
    <td>big-text</td>
  </tr>
  <tr>
    <td>product-info, bla bla bla...</td>
    <td>ic</td>
    <td>smt</td>
  </tr>
</table>

Надеюсь, это то, что вы имели в виду!

...