Скругление углов для таблицы

Question

Имеется таблица:

table {
	width: 100%;
	text-align: center;
	min-height: 300px;
	border-collapse: collapse;
	margin-top: 50px;
	margin-bottom: 50px;
	border-radius: 15px;
}

table td {
	border: 1px solid #000;
}

<table>
		<tr>
			<td>lplplpf</td>
			<td>pelfplfpf</td>
			<td>pflpelf</td>
		</tr>
		<tr>
			<td>dlpdlwp</td>
			<td>dlpdwl</td>
			<td>sdplpsdl</td>
		</tr>
		<tr>
			<td>ldsplp</td>
			<td>dslpdlpa</td>
			<td>dpsldpl</td>
		</tr>
</table>

Нужно скруглить углы у таблицы. Свойство border-radius не помогает.

Answer 1

Так скруглять не будет, это особенность таблиц.
Замените collapse на separate для таблицы и скругляйте угловые ячейки.

table {
    width: 100%;
    text-align: center;
    min-height: 300px;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 50px;
    margin-bottom: 50px;
}

table td {
    border: 1px solid #000;
}

table tr:first-child td:first-child {
    border-radius: 15px 0 0 0;
}

table tr:first-child td:last-child {
    border-radius: 0 15px 0 0;
}

table tr:last-child td:first-child {
    border-radius: 0 0 0 15px;
}

table tr:last-child td:last-child {
    border-radius: 0 0 15px 0;
}

<table>
    <tr>
        <td>lplplpf</td>
        <td>pelfplfpf</td>
        <td>pflpelf</td>
    </tr>
    <tr>
        <td>dlpdlwp</td>
        <td>dlpdwl</td>
        <td>sdplpsdl</td>
    </tr>
    <tr>
        <td>ldsplp</td>
        <td>dslpdlpa</td>
        <td>dpsldpl</td>
    </tr>
</table>

Answer 2

Для Chrome и Edge достаточно просто добавить overflow: hidden; для <table> и все дела (а "лиса" идёт лесом)):

table {
  width: 100%;
  text-align: center;
  min-height: 300px;
  border-collapse: collapse;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 15px;
  /* Добавлено */
  overflow: hidden;
  background-color: #fa0a;
  box-shadow: inset 0 0 0 1px black, 0 0 0 1px black;
}

table td { border: 1px solid #000; }

<table>
  <tr><td>lplplpf</td><td>pelfplfpf</td><td>pflpelf</td></tr>
  <tr><td>dlpdlwp</td><td>dlpdwl</td><td>sdplpsdl</td></tr>
  <tr><td>ldsplp</td><td>dslpdlpa</td><td>dpsldpl</td></tr>
</table>

Более универсальный вариант - использовать для ячеек вместо border свойство box-shadow:

table {
  width: 100%;
  text-align: center;
  min-height: 300px;
  border-collapse: collapse;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 15px;
  /* Добавлено */
  overflow: hidden;
  background-color: #fa0a;
  box-shadow: inset 0 0 0 1px black, 0 0 0 1px black;
}
/* Исправлено */
table td { box-shadow: 1px 1px 0 1px black; }

<table>
  <tr><td>lplplpf</td><td>pelfplfpf</td><td>pflpelf</td></tr>
  <tr><td>dlpdlwp</td><td>dlpdwl</td><td>sdplpsdl</td></tr>
  <tr><td>ldsplp</td><td>dslpdlpa</td><td>dpsldpl</td></tr>
</table>

Можно задать любой радиус при overflow: hidden (интересно, как в соседних ответах сделать также ;-) :

table {
  width: 100%;
  text-align: center;
  min-height: 300px;
  border-collapse: collapse;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 50%;
  /* Добавлено */
  overflow: hidden;
  background-color: #fa0a;
  box-shadow: inset 0 0 0 1px black, 0 0 0 1px black;
}
/* Исправлено */
table td { box-shadow: 1px 1px 0 1px black; }

<table>
  <tr><td>lplplpf</td><td>pelfplfpf</td><td>pflpelf</td></tr>
  <tr><td>dlpdlwp</td><td>dlpdwl</td><td>sdplpsdl</td></tr>
  <tr><td>ldsplp</td><td>dslpdlpa</td><td>dpsldpl</td></tr>
</table>

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Таблица</title>
</head>
<body>
  <table>

    <tr>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>

    <tr>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>

    <tr>
      <td>Lorem</td>
      <td>Lorem</td>
      <td>Lorem</td>
    </tr>

  </table>
</body>

<style type="text/css">

  table {
    border-collapse: separate;
    border-spacing: 0px;
    /*При желании можешь добавить*/
    /* border: 1px solid;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;*/ 
  }

  p { background: #eee; text-align: center; }  

  table td {
    padding: 10px 25px;
    border: 1px solid;
  }
  table td {
    padding: 10px 25px;
  }
  table tr:first-child td:last-child {
    border-top-right-radius: 15px;
  }
  table tr:first-child td:first-child {
    border-top-left-radius: 15px;
  }

</style>

</html>

БЛОГ НА HUSL

Скругление углов для таблицы

Ответы (3 шт):