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

Я новичок в 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.

Литература:

Таблица строк, thead, tbody, tfoot элементов.

Ответ 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>

Надеюсь, это то, что вы хотите.