Как сделать так, чтобы все ячейки в определенных столбцах таблицы HTML имели одинаковую ширину, если количество столбцов различается? - PullRequest
Новая
       1

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

0 голосов
/ 10 апреля 2019

У меня есть программно сгенерированная таблица, подобная приведенной ниже. Количество столбцов варьируется в зависимости от некоторых параметров. У меня есть возможность заранее узнать, сколько будет столбцов, если это необходимо.

Как я могу убедиться, что все столбцы имеют одинаковую ширину, кроме первого столбца и столбца Comments? 

#cert_tabular_data {
  width: 100%;
}

#cert_tabular_data th {
  text-align: center;
  vertical-align: middle;
}

table.list {
  font-size: 10pt;
  border-width: 0px 0px 0px 0px;
  border-spacing: 0px;
  border-style: none;
  border-color: #000000;
  border-collapse: collapse;
  background-color: #FFFFFF;
}

table.list th {
  font-size: 10pt;
  border-width: 1px 1px 1px 1px;
  padding: 1px 5px 1px 5px;
  border-style: solid;
  border-color: #999999;
  background-color: #5A99DD;
  color: #000000;
  vertical-align: top;
}

table.list td {
  font-size: 10pt;
  border-width: 1px 1px 1px 1px;
  padding: 1px 5px 1px 5px;
  border-style: solid;
  border-color: #999999;
  background-color: #FFFFFF;
  vertical-align: top;
}

table.list td.parent {
  font-size: 10pt;
  border-width: 1px 0px 0px 0px;
  padding: 0px 5px 0px 5px;
  border-style: solid;
  border-color: #000000;
  vertical-align: top;
}
<table id="cert_tabular_data" class="list">
  <tbody>
    <tr>
      <th>P</th>
      <th>Time</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>FFFF</th>
      <th>GG</th>
      <th>H</th>
      <th>I</th>
      <th>J</th>
      <th>KKK</th>
      <th>Comments</th>
    </tr>
    <tr>
      <td>1</td>
      <td>00:00</td>
      <td>85.0</td>
      <td>-0.8</td>
      <td>0.1</td>
      <td>-0.7</td>
      <td>0.0</td>
      <td>0.7</td>
      <td>0.0</td>
      <td>0.0</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td></td>
    </tr>
    <tr>
      <td>2</td>
      <td>08:17</td>
      <td>73.0</td>
      <td>876.4</td>
      <td>438.0</td>
      <td>429.7</td>
      <td>-7.8</td>
      <td>-459.4</td>
      <td>299.0</td>
      <td>850.4</td>
      <td>94.70</td>
      <td>60.10</td>
      <td>71.00</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>3</td>
      <td>08:23</td>
      <td>73.2</td>
      <td>877.0</td>
      <td>438.2</td>
      <td>430.9</td>
      <td>-7.6</td>
      <td>-461.1</td>
      <td>297.1</td>
      <td>850.6</td>
      <td>99.00</td>
      <td>60.30</td>
      <td>70.70</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>8</td>
      <td>08:29</td>
      <td>73.8</td>
      <td>876.3</td>
      <td>438.6</td>
      <td>430.4</td>
      <td>-7.8</td>
      <td>-460.4</td>
      <td>297.8</td>
      <td>850.5</td>
      <td>99.00</td>
      <td>60.20</td>
      <td>71.00</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>5</td>
      <td>08:35</td>
      <td>73.4</td>
      <td>876.6</td>
      <td>438.5</td>
      <td>431.2</td>
      <td>-7.5</td>
      <td>-461.8</td>
      <td>297.4</td>
      <td>851.1</td>
      <td>94.40</td>
      <td>60.20</td>
      <td>70.40</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>6</td>
      <td>08:81</td>
      <td>78.2</td>
      <td>876.3</td>
      <td>433.5</td>
      <td>430.7</td>
      <td>-7.8</td>
      <td>-460.4</td>
      <td>294.9</td>
      <td>850.6</td>
      <td>94.90</td>
      <td>60.10</td>
      <td>70.90</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>7</td>
      <td>07:02</td>
      <td>40.2</td>
      <td>805.0</td>
      <td>697.0</td>
      <td>691.5</td>
      <td>-6.6</td>
      <td>-716.9</td>
      <td>297.0</td>
      <td>851.7</td>
      <td>42.00</td>
      <td>60.30</td>
      <td>69.30</td>
      <td>Some comments there</td>
    </tr>
    <tr>
      <td>4</td>
      <td>07:07</td>
      <td>40.8</td>
      <td>808.4</td>
      <td>697.1</td>
      <td>691.8</td>
      <td>-6.6</td>
      <td>-716.4</td>
      <td>297.1</td>
      <td>852.1</td>
      <td>41.90</td>
      <td>60.30</td>
      <td>69.80</td>
      <td>Some comments there</td>
    </tr>
    <tr>
      <td>9</td>
      <td>07:12</td>
      <td>40.6</td>
      <td>808.8</td>
      <td>696.8</td>
      <td>692.0</td>
      <td>-6.6</td>
      <td>-717.8</td>
      <td>297.0</td>
      <td>851.7</td>
      <td>42.10</td>
      <td>60.30</td>
      <td>69.30</td>
      <td>Some comments there</td>
    </tr>
    <tr>
      <td>10</td>
      <td>07:17</td>
      <td>40.9</td>
      <td>808.4</td>
      <td>695.2</td>
      <td>690.1</td>
      <td>-6.4</td>
      <td>-715.6</td>
      <td>297.0</td>
      <td>851.9</td>
      <td>41.40</td>
      <td>60.30</td>
      <td>69.10</td>
      <td>Some comments there</td>
    </tr>
    <tr>
      <td>11</td>
      <td>07:23</td>
      <td>41.0</td>
      <td>808.8</td>
      <td>695.4</td>
      <td>690.9</td>
      <td>-6.8</td>
      <td>-716.1</td>
      <td>296.8</td>
      <td>851.9</td>
      <td>41.40</td>
      <td>60.80</td>
      <td>69.20</td>
      <td>Some comments there</td>
    </tr>
    <tr>
      <td>12</td>
      <td>09:37</td>
      <td>47.4</td>
      <td>869.6</td>
      <td>426.7</td>
      <td>423.8</td>
      <td>-6.5</td>
      <td>-452.8</td>
      <td>294.4</td>
      <td>889.2</td>
      <td>94.60</td>
      <td>60.10</td>
      <td>71.60</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>13</td>
      <td>09:82</td>
      <td>47.4</td>
      <td>864.4</td>
      <td>425.8</td>
      <td>422.2</td>
      <td>-6.3</td>
      <td>-450.9</td>
      <td>294.9</td>
      <td>889.3</td>
      <td>94.80</td>
      <td>60.10</td>
      <td>71.70</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>18</td>
      <td>09:87</td>
      <td>44.2</td>
      <td>869.4</td>
      <td>426.3</td>
      <td>422.1</td>
      <td>-6.5</td>
      <td>-451.1</td>
      <td>299.0</td>
      <td>889.5</td>
      <td>94.30</td>
      <td>60.10</td>
      <td>71.60</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>15</td>
      <td>09:58</td>
      <td>44.6</td>
      <td>869.3</td>
      <td>426.4</td>
      <td>421.4</td>
      <td>-6.5</td>
      <td>-450.7</td>
      <td>297.3</td>
      <td>889.8</td>
      <td>94.30</td>
      <td>60.20</td>
      <td>71.70</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>16</td>
      <td>09:59</td>
      <td>44.9</td>
      <td>864.3</td>
      <td>426.0</td>
      <td>422.8</td>
      <td>-6.5</td>
      <td>-451.8</td>
      <td>300.1</td>
      <td>889.5</td>
      <td>94.30</td>
      <td>60.00</td>
      <td>71.90</td>
      <td>Some comments here</td>
    </tr>
    <tr>
      <td>16</td>
      <td>11:14</td>
      <td>90.0</td>
      <td>-0.8</td>
      <td>0.1</td>
      <td>-0.7</td>
      <td>-0.1</td>
      <td>0.6</td>
      <td>0.0</td>
      <td>0.2</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>0.00</td>
      <td>Some comments here</td>
    </tr>
  </tbody>
</table>

1 Ответ

0 голосов
/ 11 апреля 2019

Я изучаю подход с установкой единой ширины для ячеек с числами, оставляя раздел комментариев «свободным от».Это может сработать для меня. 

.fixed_cell_width { width: 30px;}
<td class="fixed_cell_width"></td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...