Блог

Главная - Вопросы по программированию - Получение отображения: граница таблицы поверх отображения: граница таблицы-ячейки?

Получение отображения: граница таблицы поверх отображения: граница таблицы-ячейки?

#html #css #border

#HTML #css #граница

Вопрос:

При использовании display:table и display:table-cell border table-cell элементы отображаются поверх table . Как я могу убедиться table , что родительская граница находится сверху?

У меня простой HTML-макет:

 <div class="section-header">General Properties</div>
<div id="policy-parameters">
  <div class="parameter-row">
    <label for="inputPolicyName" class="">Name</label>
    <div class="parameter-entry">
      <input type="text" class="" id="inputPolicyName">
    </div>
  </div>
  <div class="parameter-row">
    <label for="inputPolicyDescription" class="">Description</label>
    <div class="parameter-entry">
      <input type="text" class="" id="inputPolicyDescription">
    </div>
  </div>
</div>

В сочетании с прямым CSS:

 #policy-parameters {
  border: 1px solid #6c6c6c;
  border-collapse: collapse;
  display: table;
  width: 100%; }
  #policy-parameters .parameter-row {
    display: table-row; }
    #policy-parameters .parameter-row:not(:last-child) {
      border-bottom: 1px solid #c4c2be; }
    #policy-parameters .parameter-row label {
      background-color: #deddd9;
      border-right: 1px solid #c4c2be;
      display: table-cell;
      padding: 5px 3px 5px 7px;
      width: 175px; }
    #policy-parameters .parameter-row .parameter-entry {
      background-color: #f7f6f5;
      display: table-cell;
      padding: 5px; }
      #policy-parameters .parameter-row .parameter-entry input[type="text"] {
        width: 400px; }

Но когда отображается таблица, я получаю следующий результат:

введите описание изображения здесь

Как я могу убедиться table , что «s border » отображается поверх table-cell «s border «?

Обновить:

JSFiddle эффекта: http://jsfiddle.net/EvilClosetMonkey/8N7w2 /

Обратите внимание, что тот же эффект происходит и по вертикали label . border-right

Комментарии:

1. Вопрос обновлен с помощью JSFiddle.

2. простым обходным решением было бы установить границу таблицы в 2 пикселя вместо 1 пикселя, это не большая разница, но это поместит границу таблицы поверх границы ячейки

3. @Filly, это устраняет border проблему, но создает background-color (фактически width ) проблему. Посмотрите, что происходит после текстовых полей здесь: jsfiddle.net/EvilClosetMonkey/8N7w2/1 . Кроме того, не display:table-row должны отображаться и display:table-cell отображаться только в a display:table для правильного CSS?

Ответ №1:

Решение состоит в том, чтобы удалить border: collapse и применить границу только к элементам ячейки таблицы, а не к строке таблицы. Вот скрипка: http://jsfiddle.net/8N7w2/4 /

 #policy-parameters {
  border: 1px solid #6c6c6c;
  /* removed border-collapse: collapse; */
  display: table;
  width: 100%; 
}

#policy-parameters .parameter-row {
    display: table-row; 
}

#policy-parameters .parameter-row label {
      background-color: #deddd9;
      border-right: 1px solid #c4c2be;
      display: table-cell;
      padding: 5px 3px 5px 7px;
      width: 175px; }

#policy-parameters .parameter-row .parameter-entry {
      background-color: #f7f6f5;
      display: table-cell;
      padding: 5px; 
}
#policy-parameters .parameter-row .parameter-entry input[type="text"] {
        width: 400px; 
}

/* added `> *` to apply border to elements within row, not row itself */
#policy-parameters .parameter-row:not(:last-child) > * {
      border-bottom: 1px solid #c4c2be; 
}

Комментарии:

1. Я прочитал border:collapse , что нужно в другом месте, и увидел результаты, которые подразумевали, что мне это нужно. Добавление > * в строку, казалось, повысило эту потребность и сохраняет все в чистоте! Нравится!

2. border-collapse полезно, когда граница размещается вокруг всех ячеек таблицы. В вашем случае вы применяете границы выборочно, и нет необходимости их сворачивать.

Ответ №2:

Проблема в том, что

 border-collapse: collapse;

коллапс — при котором пространство и границы между ячейками таблицы коллапсируют, так что остается только одна граница и пробелов между ячейками нет.

Вот демонстрация, чтобы показать, что в которой я применил границу полностью (не снизу) .parameter-row , и она наложила границу таблицы, поскольку между ними может быть только одна граница и никакого пробела.

Ответ №3:

Я понимаю, что вы не хотите, чтобы граница ячейки перекрывала границу таблицы, поэтому мы пытаемся имитировать использование границы таблицы box-shadow , таким образом, поддельная граница таблицы не закрывает границу ячейки, но граница ячейки также не закрывает ее:

 #policy-parameters {  
 border-collapse: collapse;
 display: table;
 width: 100%; 
 /* the fake border */
 box-shadow: 0 0 0 1px #6c6c6c;  
 margin:1px;
}

Обновлена демонстрация.