Вопросы Теги

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

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

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

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

Я не мог сделать (2) видимым, пока не применил к таблице стиль border-collapse: Collapse;. Отлично. Но (3) по-видимому, работает только с border-spacingи только с элементами (не или ), который в любом случае отключен сворачиванием. Между тем, по какой-то неизвестной причине marginне распознаются для , или элементы, но наличие padding-topв первой строке тела работает, за исключением того, что это не так, потому что, когда я навожу курсор на эту первую строку, вся margin-that-implemented-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>
11
задан Brian Tompsett - 汤莱恩 14 November 2017 в 20:30
поделиться