Как установить ширину colspan elents, когда другие столбцы являются динамическими - PullRequest
0 голосов
/ 23 февраля 2019

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

  <table >
        <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;">
            <tr>
                <th colspan="3"></th>
                <th colspan="4">Total</th>
                <th colspan="4">Total</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Total</th>
                <th>Size</th>
                <th>Min</th>
                <th>Max</th>
                <th>Price</th>
                <th>Size</th>
                <th>Min</th>
                <th>Max</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody style="display: block; max-height: 450px; overflow-y: scroll;">
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

Здесь два раздела (<th colspan="4">Total</th><th colspan="4">Total</th>) являются динамическими, т. Е. Их может быть больше двух, и повторяется th для этих 4 столбцов.

Теперьто, что я хочу, это первый столбец «Имя» в разделе подзаголовка шире, не мешая другим.Но из-за colspan я не могу указать ширину и colspan = "2" не работает.Я не могу вносить какие-либо изменения в макет таблицы также.Есть ли способ, которым я могу добиться этого?

1 Ответ

0 голосов
/ 23 февраля 2019

Ваше colspan="2" для решения "Имя" <th> будет работать, если вы добавите дополнительный столбец.

Для этого измените

<tr>
  <th colspan="3"></th>
  <th colspan="4">Total</th>
  <th colspan="4">Total</th>
</tr>

На

<tr>
  <th colspan="4"></th>
  <th colspan="4">Total</th>
  <th colspan="4">Total</th>
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...