Ширина таблицы HTML не подходит для разного количества столбцов - PullRequest
Новая
       18

Ширина таблицы HTML не подходит для разного количества столбцов

0 голосов
/ 19 сентября 2018

Я работаю с таблицей HTML.Я создал таблицу с 3 рядами.Первая строка имеет один столбец «ключ» и один столбец «значение».Вторая строка имеет один столбец «ключ» и два столбца «значение».И третий ряд, имеющий один столбец «Ключ» и три столбца «значение».Хотя 3-й ряд, имеющий 3 столбца.Итак, я дал первой строке 1-й столбец "colspan = 3", но для 2-й строки есть 2 столбца, поэтому я должен сопоставить его ширину с 3-й строкой.Но я не могу дать "colspan = 1,5".Даже если я приму это как закругление.Мне нужно сопоставить ширину 1-го и 2-го столбцов с 1-м столбцом. 

<table>
  <tr>
    <td>Key</td>
    <td>Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
  <tr
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
</table>

Мне нужно создать таблицу, показанную на следующем рисунке.Я пытался с colspan, но он не работает.

Ответы [ 4 ]

0 голосов
/ 19 сентября 2018

Попробуйте это. 

<table>
    <tr><td>Key</td>
        <td colspan=6>value</td>
    </tr>
    <tr>
        <td>key </td>
        <td colspan=3>value</td>
        <td colspan=3>value</td>
    </tr>
    <tr>
        <td>Key</td>
        <td colspan=2>value</td>
        <td colspan=2>value</td>
        <td colspan=2>value</td>
    </tr>
</table>
0 голосов
/ 19 сентября 2018

Вот, пожалуйста, 

<table>
    <tbody>
        <tr>
            <td>Key</td>
            <td colspan="6">Value</td>
        </tr>
        <tr>
            <td>Key</td>
            <td colspan="3">Value</td>
            <td colspan="3">Value</td>
        </tr>
        <tr> <td>Value</td>
            <td colspan="2">Value</td>
            <td colspan="2">Value</td>
            <td colspan="2">Value</td>
        </tr>
    </tbody>
</table>
0 голосов
/ 19 сентября 2018

разбить его на еще больше colspans.в основном, умножьте то, что вы делали вначале, на 2.

, например: 

<table>
  <tr>
    <td>Key</td>
    <td colspan="6">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="3">Value</td>
    <td colspan="3">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="2">Value</td>
    <td colspan="2">Value</td>
    <td colspan="2">Value</td>
  </tr>
</table>

рабочая скрипка здесь:

https://jsfiddle.net/t9woe310/3/

0 голосов
/ 19 сентября 2018

В соответствии с данным изображением вы можете использовать внутренний HTML: 

<table>
  <tr>
    <td>Key</td>
    <td colspan="3">Value</td>
  </tr>
  <tr>
    <td>Key</td>
    <td colspan="3">
        <table>
            <tr>
                <td>Value</td>
                <td>Value</td>
            </tr>
        </table>
    </td>

  </tr>
  <tr
    <td>Key</td>
    <td>Value</td>
    <td>Value</td>
    <td>Value</td>
  </tr>
</table>
...