Как я могу округлить границы стола, не удваивая границы или не используя коллапс границы? - PullRequest
Новая
       5

Как я могу округлить границы стола, не удваивая границы или не используя коллапс границы?

0 голосов
/ 22 марта 2020

Я пытался использовать ответ Переполнения стека, который нашел для углов круглого стола: 

/* 
table {
    border-collapse: collapse;
}*/

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
  /*padding: 10px;*/
}

table{
    border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Это прекрасно работает. Но если я раскомментирую border-collapse, округление исчезнет. Если я раскомментирую padding: 10px, это удвоит границу: enter image description here

Мне нужен border-collapse, чтобы избежать жирных внутренних границ. Мне нужно padding, чтобы текст в ячейках таблицы располагался на расстоянии от его границ. Как мне добиться этого, имея закругленные внешние границы?

JSFiddle: https://jsfiddle.net/eszuhvxj/1/

Ответы [ 2 ]

2 голосов
/ 22 марта 2020

Вы можете удалить верхнюю и правую границу на тд: 

table {
  border-collapse: separate;
  border:none;
  border-spacing: 0;
  width: 30em;
  --radius-border: 15px;
}
table td, table th {
  border: 1px solid; 
  text-align: center;
  padding: 10px;
}
table td  {
  border-top: none;
}
table tr:last-child td:first-child{
  border-bottom-left-radius: var(--radius-border);
}
table tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-border);
}
table tr:first-child th:first-child {
  border-top-left-radius: var(--radius-border);
}
table tr:first-child th:last-child {
  border-top-right-radius: var(--radius-border);
}
table tr th:not(:last-child),
table tr td:not(:last-child) {
  border-right: none;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>
1 голос
/ 22 марта 2020

Вот решение: 

table {
    border-spacing: 0;
    width: 100%;
}
th, td {
    border: 1px solid #000;
    padding: 0.5em 1em;
    text-align:center;
}
/* the first 'th' within the first 'tr' of the 'thead': */
 tr:first-child th:first-child {
    border-radius: 0.6em 0 0 0;
}
/* the last 'th' within the first 'tr' of the 'thead': */
 tr:first-child th:last-child {
    border-radius: 0 0.6em 0 0;
}
/* the first 'td' within the last 'tr' of the 'tbody': */
 tr:last-child td:first-child {
    border-radius: 0 0 0 0.6em;
}
/* the last 'td' within the last 'tr' of the 'tbody': */
 tr:last-child td:last-child {
    border-radius: 0 0 0.6em 0;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>
...