HTML столбец таблицы

Я сделал HTML-таблицу, и когда я закончил, я заметил, что допустил ошибку, имея одну строку с 5 столбцами, в то время как все остальные имеют 3. Можно ли исправить это, сделав 2 столбца шириной всего в половину столбца, или автоматически настроив его используя только HTML? Я не хочу использовать colspan, потому что это довольно большой стол.

<table border="1">
  <tr>
    <td>something</td>
  </tr>
  <tr>
    <td>these should be</td>
    <td>as long as the others</td>
  </tr>
  <tr>
    <td> something </td>
  </tr>
</table>

Источник

3 ответа

Решение

Вложенный стол

Если вы абсолютно не хотите использовать colspan Вы можете попробовать вложить таблицу:

<table border="1">
  <tr>
    <td>something</td>
  </tr>
  <tr>
    <td>
        <table border="1">
             <tr>
                 <td>these should be</td>
                 <td>as long as the others</td>
             </tr>
        </table>
    </td>
  </tr>
  <tr>
    <td> something </td>
  </tr>
</table>

Источник

Определяющий colspan может решить вашу проблему.

  • colspan должен быть указан на основе строки с наибольшим столбцом.
  • На самом деле он используется для расширения 2 или более столбцов по вашему желанию.
  • Это также сильно зависит от нижележащих столбцов. 
<table border="1">
    <tr>
        <td colspan="2">Something</td>
    </tr>
    <tr>
        <td>these should be<td>
        <td>as long as the others</td>
    </tr>
    <tr>
        <td colspan="2">Something</td>
    </tr>
</table>

Это должно решить вашу проблему.

РЕДАКТИРОВАТЬ: так как вам нужно охватить его без использования colspan Вы можете использовать вложенную таблицу.

<table border="1">
    <tr>
        <td colspan="2">Something</td>
    </tr>
    <tr>
        <td>
            <table border="0"> <!-- if you want border set it to 1 -->
                <tr>
                    <td>this should be</td>
                    <td>as long as the others</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">Something</td>
    </tr>
</table>

Вышеуказанный метод немного сложнее. Для этого примера это легко реализовать с помощью приведенного выше фрагмента. Но для вашего точного решения, так как вам нужно использовать его для строк с 5 столбцами.

MERGE 5 столбцов в 1 и разбить его на 3 столбца: (как реализовано ниже)

<tr>
    <td colspan="3">
        <table border="0"> <!-- if you want border set it to 1 -->
            <tr>
                <td>col 1</td>
                <td>col 2</td>
                <td>col 3</td>
                <td>col 4</td>
                <td>col 5</td>
            </tr>
        </table>
    </td>
</tr>
Источник 
<table border="1">
  <tr>
    <td colspan="2">something</td>
  </tr>
  <tr>
    <td>these should be</td>
<td>as long as the others</td>
  </tr>
  <tr>
    <td colspan="2"> something </td>
  </tr>
</table>

см. определение colspan здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td

Источник
Другие вопросы по тегам