Как сделать закругленный угол на каждом столике

Question

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

Я пробовал ниже код CSS.

.newTable {
    border-collapse: separate;
    border-spacing: 0;
}
.newTable td {
    border: solid 1px #000;
    border-style: none solid solid none;
    padding: 10px;
}

.newTable tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

.newTable tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

.newTable tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.newTable tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.newTable tr:first-child td {
    border-top-style: solid;
}

.newTable tr td:first-child {
    border-left-style: solid;
}

Но это дало мне такой результат

Answer 1

Проблема в том, что в таблице tr не нравится стилизация, поэтому вам нужно добавить border-radius И background-color в строку.

Также, поскольку у вас может быть N ячеек таблицы, мы будем использовать :first-child и :last-child только для изменения радиуса первого / последнего td в каждой строке.

Разбить строку можно с помощью свойства border-spacing в самой таблице.

Вот пример, соответствующий вашей иллюстрации.

table {
  width: 500px;
  margin: 20px;
  border-collapse: separate;
  border-spacing: 0 10px;
}

td {
  padding: 5px;
  text-align: center;
  background-color: #eee;
}
td:first-child {
  border-radius: 10px 0 0 10px;
}
td:last-child {
  border-radius: 0 10px 10px 0;
}

<table cellpadding="0" cellspacing="0" border="0">
	<thead>
		<tr>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
			<th>Header</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
		<tr>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
			<td>cell</td>
		</tr>
	</tbody>
</table>

Answer 2

Может быть, ниже код может помочь вам:

tr td:first-child span {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;

}

table {
  border-collapse: collapse;
  border-collapse: collapse;
  border-spacing: 0;
}

td span {
  border: 1px #666 solid;
  padding: 5px;
  margin-bottom: 5px;
  border-right: none;
  float: left;
  width: 100%;
}

tr td:last-child span {
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-right: 1px #666 solid;
}

<table>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
    <tr><td><span>1.1</span></td><td><span>1.2</span></td><td><span>1.3</span></td></tr>
</table>

Answer 3

Использовать следующий код -

table {
      width: 100px;
      margin: 10px;
      border-collapse: separate;
      border-spacing: 0 10px;
    }
    
    td {
      padding: 5px;
      text-align: center;
      background-color: #ccc;
    }
    td:first-child {
      border-radius: 10px 0 0 10px;
    }
    td:last-child {
      border-radius: 0 10px 10px 0;
    }

<table>
    	<tbody>
    		<tr>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    		</tr>
        <tr>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    			<td>Testing</td>
    		</tr>
    	</tbody>
    </table>

Answer 4

Вы можете использовать этот способ

---

    <table cellspacing="0">
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
     <td>1</td>
  </tr>
</table>

---

 table tr {
  margin-bottom:5px;
  display: table;
}
table tr td{
  border:1px solid;
  padding: 5px;
  border-right:none;
  border-left:none;
}
table tr td:first-child{
  border-radius: 5px 0 0 5px;
  border:1px solid;
  border-right:none;
}
table tr td:last-child{
  border-radius: 0 5px 5px 0;
  border:1px solid;
  border-left:none;
}
table{
  border:1px solid;
  border-radius: 5px;
  padding:5px;
}