#html #alignment
#HTML #выравнивание
Вопрос:
У меня возникли трудности с выравниванием столбцов в моей сетке. Я просто не могу понять, почему столбцы не выравниваются. Сначала я подумал, что это из-за полосы прокрутки, но даже если я удалю полосу прокрутки, я не смогу выровнять столбцы. Это мой html-код
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; table-layout: fixed; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<thead>
<tr>
<th>First Col</th>
<th>Second col</th>
<th>Third col</th>
<th>Fourth col</th>
<th>Fift col</th>
<th>Sixth col</th>
<th>seventh col</th>
<th>eigth col</th>
</tr>
</thead>
</table>
<div style="overflow-y: scroll; overflow-x: hidden; height: 480px;">
<table class="gridHover" id="gridData" border="1" style="table-layout:fixed">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Это моя скрипка, с которой вам, ребята, было бы легко мне помочь.
Вы можете видеть, что выходные данные отличаются в Chrome и IE, и я действительно не понимаю, почему это так.
Комментарии:
1. Почему у вас определено 9 <col>, но только 8 <th> и <td>? Вы пытались удалить последний <col> без применения какого-либо стиля?
2. @Michael да, я удалил пустой столбец, но это не помогает
Ответ №1:
Моя последняя попытка по этой теме. Я использовал фиксированную ширину, и я думаю, что это работает. Если вы не можете определить определенное значение %, вам может потребоваться использовать разные значения исправления для разных разрешений экрана / устройств. Скрипт внизу сообщения.
CSS-код (изменен .gridHover {ширина: 640 пикселей;}
.overflow {
overflow-y: auto;
overflow-x: hidden;
height: 480px;"
}
.gridHover {
width: 640px;
margin-bottom: 20px;
}
.gridHover th, .gridHover td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
.gridHover th {
font-weight: bold;
}
.gridHover thead th {
vertical-align: bottom;
}
HTML-КОД (снова изменил его на исходный формат 8 col):
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; table-layout: fixed; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<thead>
<tr>
<th style="width: 120px;">First Col</th>
<th style="width: 60px;">Second col</th>
<th style="width: 50px;">Third col</th>
<th style="width: 70px;">Fourth col</th>
<th style="width: 70px;">Fift col</th>
<th style="width: 50px;">Sixth col</th>
<th style="width: 100px;">seventh col</th>
<th style="width: 100px;">eigth col</th>
</tr>
</thead>
</table>
<div class="overflow">
<table class="gridHover" id="gridData" border="1" style="table-layout:fixed">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;"> <col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Вы можете проверить результат в этой скрипте -> http://jsfiddle.net/4KB3C/56
Комментарии:
1. вы почти на месте, но я хочу знать, если я вручную установил ширину таблицы в 640 пикселей, используя класс gridhover, и не меняю css в gridhover, то почему это не работает. посмотрите на эту скрипку jsfiddle.net/4KB3C/69 Потому что этот gridhover используется во многих местах моего приложения, которые я не хотел менять. можем ли мы что-то с этим сделать?
2. Я не понимаю, что вы хотите заархивировать сейчас. как насчет использования другого класса css для любой части таблицы, которую вы хотите изменить?
3. но вы можете видеть, что класс gridhover также применяется к th, td, поэтому его трудно изменить.
4. Почему вы используете такое определение стиля -> <table class=»gridHover» id=»gridData» border=»1″ style=»table-layout:fixed;width: 640px»> и CSS через классы параллельно. Я предлагаю поработать с классами или идентификаторами и удалить определения стилей из html-кода.
5. Проблема в том, что сетка — это не что иное, как виджет, и она используется повсеместно в моем приложении, поэтому я не могу использовать ID.
Ответ №2:
Прошу прощения, если я ошибаюсь или не уверен в том, чего вы пытаетесь достичь. Но, на мой взгляд, вы можете установить ширину каждого столбца во второй и третьей строках с одинаковым размером для всех столбцов в вашей первой строке, чтобы таблица была выровнена. Вы можете задать размер непосредственно в «TH» разметке.
<thead style="align:centre; margin:auto;">
<tr>
<th style="width: 120px;">First Col</th>
<th style="width: 60px;">Second col</th>
<th style="width: 50px;">Third col</th>
<th style="width: 70px;">Fourth col</th>
<th style="width: 70px;">Fift col</th>
<th style="width: 50px;">Sixth col</th>
<th style="width: 100px;">seventh col</th>
<th style="width: 100px;">eigth col</th>
</tr>
</thead>
И
<td style="width: 120px;"> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td style="width: 120px;"> <span style="word-wrap: break-word">AB</span>
</td>
<td style="width: 120px;"> <span style="word-wrap: break-word">1</span>
</td>
Комментарии:
1. Сначала вы должны удалить все свои наценки на столбцы. jsfiddle.net/Alkasih/YPW47/1
2. Во-первых, я думаю, что для нас немного сложно увидеть, на какую ширину задан столбец, установив его непосредственно в вашей разметке th или td, вы сможете это четко видеть. И последнее, я впервые вижу, что люди используют это при настройке таблицы, и спасибо вам за это.
3. Также я не могу указать жесткую ширину кода этих 2 строк, потому что html, который вы видите, является плагином и используется другим кодом. поэтому я не могу это жестко закодировать.
4. Я постараюсь помочь, но я только что нашел здесь пример, который, возможно, тоже сможет вам помочь. w3schools.com/tags/tryit.asp?filename=tryhtml_colgroup_width спасибо за голосование. 🙂
5. jsfiddle.net/Alkasih/LFDjd здесь с colgroup.. Я исправлю это с помощью вашего кода, но на это потребуется около 15 минут с этого момента
Ответ №3:
Во-первых, отсутствует замыкание. Вы также не должны устанавливать ширину больше, чем max-width!
Теперь к вашей проблеме:
Просто удалите свой «overflow-y: scroll; « из div, содержащего вторую таблицу, и вы готовы к работе…
Я думаю, это все, что вам нужно сделать.
Комментарии:
1. посмотрите на эту скрипку jsfiddle.net/4KB3C/54 я удалил overflow-y, но все равно сдвиги столбцов
2. Хорошо, я думаю, что нашел решение: добавьте «display: table;» к обоим элементам вашей таблицы! (вы можете удалить overflow-y)
3. проверьте эту скрипку jsfiddle.net/4KB3C/57 я добавил отображение: таблица, но все та же проблема
4. О, извините, по моей вине, для 2-й таблицы вам нужно добавить «display: table;» в родительский div (родительский для 2-й таблицы!!!) jsfiddle.net/b4FtW
Ответ №4:
Измените максимальную ширину на 100%, потому что это не имеет смысла, если исходная ширина меньше максимальной.
.gridHover {
width: 100%;
margin-bottom: 20px;
max-width: 100%;
}
Я удаляю ваши отступы, из-за которых ширина таблицы уменьшается, а высота строки немного раздражает.
.gridHover th, .gridHover td {
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}
Комментарии:
1. Странно, что вы можете опубликовать 2 ответа на один и тот же вопрос 🙂
Ответ №5:
Вы используете две разные таблицы. вот почему у вас возникает проблема с выравниванием. Я полагаю, это то, что вам требуется.
<div>
<div>
<table class="gridHover" style="margin-bottom: 0; border-bottom: 1px solid #000;" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<thead>
<tr>
<th>First Col</th>
<th>Second col</th>
<th>Third col</th>
<th>Fourth col</th>
<th>Fift col</th>
<th>Sixth col</th>
<th>seventh col</th>
<th>eigth col</th>
</tr>
</thead>
</table>
<div style="overflow-y: scroll; overflow-x: hidden; height: 480px;">
<table class="gridHover" id="gridData" border="1">
<colgroup>
<col style="width: 120px;">
<col style="width: 60px;">
<col style="width: 50px;">
<col style="width: 70px;">
<col style="width: 70px;">
<col style="width: 50px;">
<col style="width: 100px;">
<col style="width: 100px;">
<col>
</colgroup>
<tbody class="table table-hover">
<tr>
<td> <span style="word-wrap: break-word">Tom cruise</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
<tr>
<td> <span style="word-wrap: break-word">Arnold</span>
</td>
<td> <span style="word-wrap: break-word">AB</span>
</td>
<td style="text-align: center;"> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word">7</span>
</td>
<td> <span style="word-wrap: break-word">1</span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word"></span>
</td>
<td> <span style="word-wrap: break-word">CCC </span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Комментарии:
1. Выравнивание в вашей скрипке неправильное, а также появляется неправильная горизонтальная полоса прокрутки
2. Почему вы удалили полосу прокрутки, а также ширину?
3. Требуется указывать ширину независимо от разрешения?
4. Да, мне нужно указать ширину
5. можете ли вы посмотреть, сможете ли вы найти решение. Если вы сможете решить, то сможете получить репутацию 50