HTML-таблица с colspan работает неправильно
У меня есть 2 HTML-таблицы с одинаковым кодом в обоих случаях. Я использовал «colspan», чтобы различать 2 столбца в таблице. Ширина основной таблицы — colspan 65, а столбцов — colspan 5 и 60 соответственно. Но в двух таблицах ширина столбцов разная.
Я проверил все коды. Обе таблицы имеют одинаковый код, я использовал свойство table-cell, но оно все еще не работает. Также не была указана ширина столбцов.
Вот синтаксис обеих моих таблиц:
<table class = "agenda-table" style = "width: 100%;">
<tbody>
<tr class = "agheader">
<th colspan = "65">Title</th>
</tr>
<tr>
<td colspan = "5">xxx</td>
<td colspan = "60">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td colspan = "5">aaa</td>
<td colspan = "60">
<h4>bbb</h4>
</td>
</tr>
....
</tbody>
</table>
Вы можете проверить живой страница здесь.
Вы можете видеть, что там 2 стола. 1-й столбец обеих таблиц имеет разную ширину независимо от того же кода.
Спасибо за проверку.
Спасибо за ваш ответ @symlink Здесь вы можете проверить скриншот: prnt.sc/o2s28i Убедитесь, что полоса временной шкалы (красная вертикальная линия с o между ними) не находится в одной строке в обеих таблицах. Полоса размещается сразу после первой колонки. Мне нужны эти 2 бара в одной строке.
Ответы 2
Используйте равную процентную ширину в первой строке каждой таблицы.
<table class = "agenda-table" style = "width: 100%;">
<tbody>
<tr class = "agheader">
<th style = "width: 35%">xxx</th>
<th>Title 1</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class = "agenda-table" style = "width: 100%;">
<tbody>
<tr class = "agheader">
<th style = "width: 35%">xxx</th>
<th>Title 2</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>На вашей странице много ошибок, как вы можете видеть в этом результате теста единорога: https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en
Есть много ошибок синтаксического анализа, незакрытые теги, которые могут привести к ошибкам так.
Почему вы используете встроенный код, если вы используете классы CSS для стилизации таблицы?
На ваших страницах css я нашел это определение:
.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}
так зачем снова определять witdh с помощью встроенного кода?
style = "width: 100%;"
Я взял ваш код из вашего вопроса и заменил встроенный код с классами и добавленный CSS.
пример css:
* {
margin :0;
padding :0;
}
.agenda-table {
margin : 0 auto;
width : 100%
}
.agheader {
float : left;
width : 65%;
background : #f442bc;
}
th, tr {
float : left;
width : 100%;
text-align : left;
}
.left {
float : left;
width : 5%;
border-right : 1px solid #f442bc;
}
.right {
float : left;
width : 60%;
}
пример html:
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "de" lang = "de">
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<table class = "agenda-table">
<tbody>
<tr class = "agheader">
<th>Title</th>
</tr>
<tr>
<td class = "left">xxx</td>
<td class = "right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class = "left">aaa</td>
<td class = "right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class = "agenda-table">
<tbody>
<tr class = "agheader">
<th>Title</th>
</tr>
<tr>
<td class = "left">xxx</td>
<td class = "right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class = "left">aaa</td>
<td class = "right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Вот рабочий пример, которая показывает, что этот пример работает: https://jsfiddle.net/Thorske/bL5ktrga/11/
Определение с плавающей запятой может не понадобиться, так как это таблица, но это позволит легко переключаться с таблиц на списки.
Я не вижу проблемы. Строка заголовка представляет собой один столбец (на всю ширину таблицы), а каждая последующая строка состоит из двух столбцов (5 и 60).