CSS: установка ширины / высоты в процентах минус пиксели для столбца заголовка таблицы - PullRequest
Новая
       55

CSS: установка ширины / высоты в процентах минус пиксели для столбца заголовка таблицы

0 голосов
/ 29 августа 2018

Почему в следующем примере столбцы заголовка таблицы не принимают ширину, определенную в CSS?

Я думаю, что в таблице 1 браузер не может рассчитать процентное значение и фиксированное. 

/************* commun css***********************/
table {
   border-collapse: collapse;
   table-layout:fixed;
   width: 100%;
   position: relative;
}

td, th {
   border: 1px solid black;
   -webkit-box-sizing: border-box;
}

tr{
  width: 100%;
  position: relative;
}

/************* css table 1***********************/

.table1 .col1 {
  width: calc(35% - 10px);
}

.table1 .col2 {
  width: calc(40% - 10px);
}

.table1 .col3 {
  width: calc(25% - 10px);
}

.table1 .col4 {
  width: 30px;
}

/************* css table 2***********************/
.table2 .col1 {
  width: calc(30%);
}

.table2 .col2 {
  width: calc(20%);
}

.table2 .col3 {
  width: calc(50%);
}
<p>
Table 1 : invalid render (Chrome browser)
</p>
<table class="table1">
  <thead>
    <tr>
      <th class="col1">Col 1</th>
      <th class="col2">Col 2</th>
      <th class="col3">Col 3</th>
      <th class="col4">Col 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

<p>
Table 2 : valid render (Chrome browser)
</p>

<table class="table2">
  <thead>
    <tr>
      <th class="col1">Col 1</th>
      <th class="col2">Col 2</th>
      <th class="col3">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>Row 1</td>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>Row 2</td>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

У кого-нибудь есть совет в этой ситуации?

Заранее спасибо

Пример: https://jsfiddle.net/3wq65hb4/

1 Ответ

0 голосов
/ 29 августа 2018

Да, существует проблема с шириной calc () для таблиц. Но это работает для дивов. Как насчет того, чтобы делать это на div вместо таблиц?

Давайте рассмотрим пример для ваших целей: https://jsfiddle.net/3wq65hb4/39/

Вы можете найти там: 

.row {
    display: flex;
}

Это для одинаковой высоты для столбцов. Также вы можете найти там: 

margin-left: -1px;

Это решение для границ - чтобы избежать двойных границ, таких как:

Double column width

Также помните, что max-width для вашего столбца: 30px означает, что оно всегда будет 30px, даже если ваш контент будет шире:

Wider column

Но, возможно, это то, чего вы хотите достичь.

Дайте мне знать, подходит ли вам это решение. И удачи вам с другими htmls:)

...