Границы и интервалы между отдельными строками таблицы
Я новичок в CSS и работаю над внутрисетевым приложением, которое будет отображаться в современных стандартных браузерах (поддержка IE не нужна). Я потратил много времени на поиск ответов на этом и других сайтах, только чтобы найти ответы "Это невозможно, потому что..." или "Сделать этот взлом вместо этого....", но я просто не соглашусь с этим.
Вот что мне нужно:
- Таблица с одной строкой заголовка и несколькими строками тела;
- Твердая граница в строке заголовка;
- Вертикальное белое пространство (пробел? margin? spacing?) только между строкой заголовка и первой строкой тела;
- Строки тела выделяются при наведении мыши.
Я не мог получить (2), чтобы быть видимым, пока не назову таблицу border-collapse: collapse;. Хорошо. Но (3), по-видимому, работает только с border-spacing, и только на элементах <td> (не <tbody> или <tr>), которые в любом случае отключены с помощью collapse. Между тем, по какой-то непонятной причине margin не распознаются для элементов <thead>, <tr> или <th>, но имеет padding-top в первой строке тела <td>, за исключением того, что он не, потому что, когда я курсирую над этой первой строкой, все выделение, которое-реализовано-as- padding также подсвечивается, что меня тошнит.
Я знаю, что наличие нескольких пикселей поля между заголовком таблицы и телом - это действительно поле из-за левого поля, почему-бы-кто-нибудь-хочет-то, что нужно, но что я должен сказать вам? Я не дешевая дата.
Пожалуйста, будьте так же жестоки и снисходительны, насколько это возможно, указывая на мою глупость в понимании CSS, если вы также: 1) говорите, как это сделать, не меняя разметки (тем самым сохраняя разделение представления от контента CSS, очевидно, поощрите) или 2) согласитесь со мной, что CSS странный.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
Ответы
Ответ 1
Это устранит ваши проблемы без каких-либо хаков и, конечно же, вполне возможно. Обновленный код (только изменения CSS) разделяется ниже с пояснениями.
Проблема 3:
Мы можем использовать селектор CSS :first-of-type (таргетинг только на первую строку) подряд со всем <td> под ним и использовать атрибут padding-top. Простой:-)
<tr> не может иметь значения по умолчанию. Вновь доступны хаки (вышеупомянутые ответы), но я бы не пошел туда, как вы этого не хотите.
Кроме того, поскольку мы использовали padding, эффект зависания отлично работал бы на весь контент строки. Следовательно, получение желаемого изменения без изменений разметки.
Проблема 2:
Мы можем удалить атрибут border-collapse из table и вместо этого применить рамку на тегах <th> (пусть останется border-spacing: 0 или граница будет прерывистой). Простой снова: -)
Проблема 1 и 4 уже покрыта. Никакая разметка не изменяется по вашему желанию. Вот скрипка
Таким образом, обновленный код стиля будет выглядеть как
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
Ответ 2
Хорошо, в порядке:
1: Таблица с одной строкой заголовка и несколькими строками:
Это то, для чего были созданы элементы thead и tbody для:
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
Здесь также tfoot (см. ссылки), который, если используется, должен быть объявлен перед элементом tbody.
2: Твердая рамка в строке заголовка:
thead tr th {
border-bottom: 2px solid #000;
}
Выберите элементы th в элементе thead, селектор tr, вероятно, здесь не нужен, и, хотя он не навредит, можно упростить: thead th {/*...*/}.
3: Вертикальное белое пространство (пробел? margin? spacing?) между строкой заголовка и только первой строкой тела. padding, похоже, не может быть применен к элементам thead, tbody или tr, поскольку они, по существу (я полагаю), "невизуальные", поэтому его необходимо определить на td элементов. Это означает, что при зависании означает, что в течение :hover (см. Следующую часть) есть нечаянно большая "строка", занятая первой строкой.
tbody tr:first-child td {
padding-top: 1em;
}
4: Строки тела выделяются при наведении мыши.
tbody tr:hover td {
background-color: #ffa;
}
В то время как вы можете применить :hover к текущей ячейке, а затем и братьям и сестрам (с общим комбинатором sibling ~), вы не можете применить стиль к братьям и сестрам, которые появляются ранее, поэтому здесь мы ставим стиль элементы td в ответ на :hover их родителя tr.
Причина, по которой нам нужно стилизовать td (а не напрямую изменять background-color tr), потому что элементы td обычно не являются стандартными для прозрачного фона, что означает изменение/выделение background-color является "скрытым" элементом background-color элементов td.
JS Fiddle demo.
Литература:
Ответ 3
Чтобы применить margin к первой строке таблицы, вам нужно сначала сделать это display: block;, так как поле может применяться только к элементам блока (включая встроенные блоки)
Но вот другое решение, использующее позиционирование:
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
position: relative; /* Add positioning */
margin-top: 40px; /* Add some margin */
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
thead {
position: absolute; /* Position this element absolute */
top: -40px; /* And move it up */
}
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
<p>Thats how its done!</p>
</body>
В основном мы применяем position: relative; к таблице и position: absolute; к thead.
Теперь вы можете перемещать thead внутри таблицы с помощью свойств top, bottom, left и right. Мы собираемся переместить его на 40 пикселей, используя top: -40px;
Мы не применяем position: absolute; к tbody, потому что, если мы это сделаем - этот элемент больше не будет "растягивать страницу", иначе говоря, все следующие элементы будут игнорировать его высоту. (попробуйте сделать это и посмотрите, что произойдет со следующим блоком
)
Единственное, что у нас осталось - это применить некоторый крайний край к самой таблице, сдвинув ее вниз (по мере того, как мы сдвинули вверх вверх)
Да, время от времени CSS может казаться немного странным, но это в основном потому, что мы забываем, как должны обрабатываться некоторые элементы страницы (а именно, таблицы и их дочерние элементы)
Ответ 4
Как насчет добавления пустой строки в начале, например
<tbody>
<tr><td> </td></tr>
<tr><td>blablablabla</td></tr>
И используйте этот CSS
tbody tr:first-child td{
padding-top: 15px;
}
tbody tr:first-child:hover{
background-color: transparent;
}
Итак, добавление будет добавлено в первую строку, а первая строка не будет выделяться над мышью?:)
Ответ 5
Все ваши 4 точки покрыты там -
- Сначала загрузите метро ui css здесь http://metroui.org.ua/
- Включите два файла css 1. metro-bootstrap, 2.metro-bootstrap-отзывчив в ваш проект.
-
Зарегистрируйте это в BundleConfig.
bundles.Add(новый стильBundle ( "~/Content/css/metroUI" ). Включить ( "~/Content/css/metro-bootstrap.css" "~/Содержание/CSS/метро-самозагрузка-responsive.css" ));
-
Теперь используйте класс "gr-items" для таблицы
< table id = "divAllActivities" class= "gr-items" >
<thead>
<tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
</tbody>
Надеюсь, это то, что вы хотите.
