Радиус границы таблицы не работает из-за свойства border-collapse
Мой радиус границы не отображается, если у меня есть свойство сворачивания границ в теге таблицы. Мне нужно свойство border-radius, и если я удалю свойство border-collapse, я не получу тот внешний вид, который мне нужен, а именно серые участки доходят до самого края таблицы.
Каково решение этой проблемы и в чем причина?
заранее спасибо
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*if i comment out the border-collapse property it then shows my radius*/
border-collapse: collapse;
margin: 25px 0;
width: 50%;
border-radius: 5px;
font-size: 1.4rem;
min-width: 400px;
border: 1px solid #c3c3c3;
/*margin is just for demo*/
margin: 20px 20px;
}
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}<table>
<tbody>
<tr>
<td>Application</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
</tr>
</tbody>
</table>очень
Ответы 1
Если вы хотите, чтобы между фоном контента и рамкой не было пробелов, просто удалите border-collapse и добавьте border-spacing: 0. border-spacing: 0 вообще не повлияет на радиус границы, а также даст вам результат отсутствия пространства между границей и внутренним содержимым.
В поиске, кажется, есть некоторые аномалии с использованием коллапса и радиуса вместе. Есть также некоторые обходные пути, когда вы используете псевдотеги в дочерних таблицах специально, чтобы заставить работать радиус, но зачем тратить все это время, когда вы можете просто удалить пространство между границей и его внутренним содержимым, используя border-spacing, который хорошо работает с border-radius
Обновлено: Используя псевдоселекторы вместе с border-space: 0, вы можете добиться более выраженного радиуса границы.
Мы хотим настроить таргетинг на каждый элемент td, который граничит с краем элемента таблицы.
table tr td:first-of-type и table tr td:last of type, чтобы получить левую и правую стороны. Затем мы нацеливаем каждого последующего первого и последнего потомка, чтобы получить углы. Наконец, если это динамическая таблица, и у вас будет более two таблиц данных, расположенных в таблице, добавьте td:not(:first-child):not(:last-child) к каждому первому и последнему типу.
I don't get the look I want which is the grey sections to go to the very edge of the table.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*add border-spacing: 0 instead of border-collapse: collapse*/
border-spacing: 0;
margin: 25px 0;
width: 50%;
font-size: 1.4rem;
min-width: 400px;
/*margin is just for demo*/
margin: 20px 20px;
}
/* Start psuedo child tags here, targeting each data elements relevant corners and sides */
table tr td:first-of-type {
border-left: 1px solid #c3c3c3;
}
table tr td:last-of-type {
border-right: 1px solid #c3c3c3;
}
/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added
that are not sides or corners however, they are border
data tables on top or bottom */
table tr:first-of-type td:not(:first-child):not(:last-child){
border-top: 1px solid #c3c3c3;
}
table tr:last-of-type td:not(:first-child):not(:last-child){
border-bottom: 1px solid #c3c3c3;
}
table tr:first-of-type td:first-child {
border-top: 1px solid #c3c3c3;
border-top-left-radius: 5px;
}
table tr:first-of-type td:last-child {
border-top: 1px solid #c3c3c3;
border-top-right-radius: 5px;
}
table tr:last-of-type td:last-child {
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-right-radius: 5px;
}
table tr:last-of-type td:first-child {
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-left-radius: 5px;
}
/* End Psuedo tags here */
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}<div id = "table">
<table>
<tbody>
<tr>
<td>Application</td>
<td>here is some data</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>some data in between</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>some data in between</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>more tables</td>
<td>some data in between</td>
<td>more data</td>
</tr>
<tr>
<td>some more data still</td>
<td>some data in between</td>
<td>and yet more about this data</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
<td>Plated too</td>
</tr>
</tbody>
</table>
</div>это сработает, но верхний радиус на обоих углах неправильный, похоже, что в нем есть белый цвет? - нижние углы идеальны? На самом деле, когда вы увеличиваете масштаб, видно, что верхний ряд нависает над верхними углами, создавая белый вид. Покажите, как мне это исправить?
@PaulMaximus Я добавил метод нацеливания на каждую сторону и угол с помощью псевдотегов, чтобы добавить более надежную границу, где радиус более выражен. Нацельтесь на первый и последний тип, добавив боковые границы, затем на первый и последний тип вместе с первым и последним дочерним элементом, чтобы получить соответствующие углы, а также верхнюю и нижнюю границы.
@PaulMaximus отлично, надеюсь, это поможет и другим.
Я предполагаю, что вы намерены удалить любое пространство между границей и внутренним содержимым, да, а также иметь радиус на границе?