HTML-таблица со вторым заголовком на полпути через столбец?

Можно ли написать таблицу в html как показано ниже? Я понимаю, что можно сделать это двумя отдельными столами, но я не хочу этого делать, потому что я хочу, чтобы таблицы идеально соответствовали друг другу (один непосредственно под другим.)HTML-таблица со вторым заголовком на полпути через столбец?

Возможно ли это?

SINGLE TABLE: 
      Title 1 
———————————————————————————————— 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
———————————————————————————————— 
      Title 2 
———————————————————————————————— 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
|  |      | 
————————————————————————————————

источник

2016-09-14 Maxim Lott

Это не код сайта службы – dippas

@dippas lol вы отвечаете первым, а затем удаляете и комментируете XD – DaniP

Я видел свою ошибку, поэтому я ее исправил;) – dippas

Это будет делать трюк ..

In your CSS add .. 
th { 
    text-align: center; 
    background: pink; 
}

в вашем HTML Добавить.

<table> 
     <tr> 
    <!----><th colspan="2">title 1</th> 
     </tr> 
     <tr> 
      <td>row 1.1</td> 
      <td>row 1.2</td> 
     </tr> 
     <tr> 
      <td>row 2.1</td> 
      <td>row 2.2</td> 
     </tr> 
     <tr> 
    <!----><th colspan="2">title 2</th> 
     </tr> 
     <tr> 
      <td>row 3.1</td> 
      <td>row 3.2</td> 
     </tr> 
     <tr> 
      <td>row 4.1</td> 
      <td >row 4.2</td> 
     </tr> 
    </table>

Просто добавьте <th></th> где вы хотите заглавной строке ..

EDIT
Добавлены теги в заголовке таблицы. Кроме того, CSS для центрирования, как @Paulie_D предложил.

источник

2016-09-14 15:38:28

'th' должен иметь родителя' tr', а вы haven ' t упоминал проблему ширины. Хороший вариант, хотя. - https://jsfiddle.net/2tny25pg/ –

Tx для его очистки :) Изменит мой ответ. –

Вы можете создавать HTML таблицы здесь: http://www.tablesgenerator.com/html_tables я был в состоянии сделать что-то вроде этого:

<style type="text/css"> 
.tg {border-collapse:collapse;border-spacing:0;} 
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
.tg .tg-yw4l{vertical-align:top} 
</style> 
<table class="tg"> 
    <tr> 
    <th class="tg-yw4l"></th> 
    <th class="tg-yw4l"></th> 
    <th class="tg-yw4l"></th> 
    </tr> 
    <tr> 
    <td class="tg-yw4l" colspan="3"></td> 
    </tr> 
    <tr> 
    <td class="tg-yw4l"></td> 
    <td class="tg-yw4l"></td> 
    <td class="tg-yw4l"></td> 
    </tr> 
</table>

источник

2016-09-14 15:38:21

HTML-таблица со вторым заголовком на полпути через столбец?

ответ

Смежные вопросы