Я пытаюсь разработать HTML / CSS, который может поставить рамку вокруг определенных строк в таблице. Да, я знаю, что на самом деле мне не нужно использовать таблицы для макета, но я еще не знаю достаточно CSS, чтобы полностью заменить его.
В любом случае, у меня есть таблица с несколькими строками и столбцами, некоторые из которых объединены с rowspan и colspan, и я хотел бы поставить простую рамку вокруг частей таблицы. В настоящее время я использую 4 отдельных класса CSS (верхний, нижний, левый, правый), которые я прикрепляю к <td>
ячейкам, расположенным вверху, внизу, слева и справа от таблицы соответственно.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
Есть ли более простой способ сделать то, что я хочу? Я попробовал применить верх и низ к a, <tr>
но это не сработало. (ps Я новичок в CSS, поэтому, вероятно, есть действительно простое решение, которое я пропустил.)
примечание: мне нужно иметь несколько разделов с рамками. Основная идея состоит в том, чтобы иметь несколько кластеров с границами, каждый из которых содержит несколько строк.
источник
Ответы:
Как насчет
tr {outline: thin solid black;}
? У меня работает с элементами tr или tbody и кажется совместимым с большинством браузеров, включая IE 8+, но не ранее.источник
Спасибо всем, кто откликнулся! Я пробовал все решения, представленные здесь, и я больше искал в Интернете другие возможные решения, и я думаю, что нашел одно многообещающее:
Вывод:
Вместо того, чтобы добавить
top
,bottom
,left
иright
классы каждый<td>
, все , что нужно сделать , это добавитьtop row
к верху<tr>
,bottom row
к низу<tr>
, иrow
каждому<tr>
между ними. Что-то не так с этим решением? Есть ли какие-либо кроссплатформенные проблемы, о которых мне следует знать?источник
cellspacing
Атрибут является устаревшим в HTML5. Похоже, что CSStable { border-collapse: collapse; border-spacing: 0; }
- это то, что нужно.Если вы установите
border-collapse
стильcollapse
в родительской таблице, вы сможете стилизоватьtr
: (стили встроены для демонстрации)Вывод:
источник
Я тоже просто играл с этим, и это показалось мне лучшим вариантом:
Обратите внимание, что это предотвратит использование гибкой / автоматической ширины столбцов , поскольку ячейки больше не будут выравниваться с ячейками в других строках, но форматирование границ / цвета по-прежнему работает нормально. Решение состоит в том, чтобы задать ширину TR и TD (в пикселях или%).
Конечно, вы можете создать селектор,
tr.myClass
если хотите применить его только к определенным строкам. Однако, по-видимомуdisplay: table
, не работает для IE 6/7, но, вероятно, есть другие хаки (hasLayout?), Которые могут сработать для них. :-(источник
Вот подход с использованием элементов тела, которые могли бы быть способом сделать это. Вы не можете установить границу на tbody (так же, как вы не можете на tr), но вы можете установить цвет фона. Если желаемый эффект можно получить с помощью цвета фона в группах строк вместо границы, это сработает.
источник
Сгруппируйте строки вместе с помощью
<tbody>
тега, а затем примените стиль.И css в style.css
источник
Единственный другой способ, который я могу придумать, - это заключить каждую из строк, которые вам нужны, во вложенную таблицу. Это упростит создание границы, но может создать другие проблемы с макетом, вам придется вручную установить ширину ячеек таблицы и т. Д.
Ваш подход вполне может быть лучшим в зависимости от других требований к макету, и предлагаемый здесь подход является лишь возможной альтернативой.
источник
Исходя из вашего требования, что вы хотите поставить рамку вокруг произвольного блока ячеек MxN, действительно нет более простого способа сделать это без использования Javascript. Если ваши ячейки зафиксированы, вы можете использовать поплавки, но это проблематично по другим причинам. то, что вы делаете, может быть утомительным, но это нормально.
Хорошо, если вы заинтересованы в решении Javascript с использованием jQuery (мой предпочтительный подход), вы получите этот довольно страшный фрагмент кода:
Я с радостью приму предложения о более простых способах сделать это ...
источник
уловка заключается в свойстве контура благодаря ответу на загадку с небольшими изменениями
используйте этот класс
затем в HTML
и результат надеюсь, что это поможет вам
источник
Более простой способ - сделать таблицу элементом управления на стороне сервера. Вы можете использовать что-то подобное:
источник