Границы и интервалы между конкретными строками таблицы

Я новичок в CSS и работаю над приложением внутри сети, которое будет отображаться в современных стандартных браузерах (поддержка IE не необходима). Я потратил много времени на поиск ответов на этом и других сайтах, только чтобы найти ответы «Это невозможно, потому что ...» или «Вместо этого взломать…», но я просто не приму это.

Вот что мне нужно:

  1. Таблица с одной строкой заголовка и несколькими строками тела;
  2. Сплошная граница под строкой заголовка;
  3. Вертикальный пробел (отступ? margin? spacing?) только между строкой заголовка и первой строкой тела;
  4. Строки тела подсвечиваются при наведении мыши.

Мне не удалось отобразить (2), пока я не стилизовал таблицу border-collapse: collapse;. Хорошо. Но (3) очевидно работает только с border-spacing и только с <td> элементы (не <tbody> или <tr>), который в любом случае отключен collapse. Между тем, по неизвестной причине margin не распознаются для <thead>, <tr> или <th> элементов, но с padding-top в первой строке тела <td> работает, за исключением того, что это не так, потому что, когда я наводю курсор мыши на эту первую строку, все поле, которое реализуется как 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>
11 голосов | спросил shlomocomputer 4 J0000006Europe/Moscow 2012, 04:01:53

1 ответ


0

Это исправит ваши проблемы без каких-либо взломов и, конечно, это вполне возможно. Обновленный код (только изменения 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>
ответил Nikhil Nanjappa 28 Jpm1000000pmThu, 28 Jan 2016 13:37:02 +030016 2016, 13:37:02

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132