Используйте colspan в одном ряду - PullRequest
Новая
       11

Используйте colspan в одном ряду

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

Я пытаюсь получить определенную раскладку таблицы: 

---------
| |   | |
---------

, как показано в первой таблице, но хотелось бы отображать только строку, а не заголовок таблицы. Как только я это скрываю, макет (colspan = 2) теряется: 

----------
|  |  |  |
----------

Пример кода: 

<table border="1" style="width:100%;">
  <thead style="display:fixed">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

<br/>

<table border="1" style="width:100%;">
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>

https://jsfiddle.net/8v6enhq2/

Ответы [ 3 ]

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

Вот мое решение. 

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:fixed">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td  style="width:25%">A</td>
    <td colspan="2">B</td>
    <td  style="width:25%">C</td>
  </tbody>
</table>

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td  style="width:25%">A</td>
    <td colspan="2">B</td>
    <td  style="width:25%">C</td>
  </tbody>
</table>
0 голосов
/ 27 августа 2018

Так как наиболее подходящий на мой взгляд ответ был дан в комментарии к моему первоначальному вопросу пользователем LGSon, я добавляю его здесь, чтобы принять его в качестве ответа:

Вот один из способов: jsfiddle.net/8v6enhq2 / 16 - LGSon 2 дня назад

... и вот еще: jsfiddle.net/8v6enhq2/17 ... это лучшее, хотя есть некоторые проблемы поддержки кросс-браузерного сбоя - LGSon 2 дня назад

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

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

Если вы хотите, чтобы каждая ячейка потребляла, скажем, 25% ширины, укажите это в разделе cols. 

<table border="1" style="width:100%;">
  <cols>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
    <col style="width:25%"/>
  </cols>
  <thead style="display:none">
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </thead>
  <tbody>
    <td>A</td>
    <td colspan="2">B</td>
    <td>C</td>
  </tbody>
</table>
...