Закругленные углы таблицы Только CSS

Я искал и искал, но не смог найти решения для моих требований.

У меня есть простая таблица HTML. Мне нужны закругленные углы, без использования изображений или JS, то есть только чистый CSS . Как это:

Закругленные углы для угловых ячеек и 1pxтолстая рамка для ячеек.

Пока у меня есть это:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Но это оставляет меня без границ для ячеек. Если я добавлю границы, они не закругляются!

Какие-нибудь решения?

Кажется, отлично работает в FF и Chrome (не тестировал другие) с отдельными границами: http://jsfiddle.net/7veZQ/3/

Изменить: вот относительно чистая реализация вашего эскиза:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

На мой взгляд, решение Twitter Bootstrap выглядит хорошо. Он исключает IE <9 (без закруглений в IE 8 и ниже), но я думаю, что это нормально, если вы разрабатываете перспективные веб-приложения.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Вы можете поиграть с этим здесь (на jsFiddle)

Во-первых, вам понадобится больше, чем просто, -moz-border-radiusесли вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая простой border-radius, следующим образом:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Во-вторых, чтобы напрямую ответить на ваш вопрос, на border-radiusсамом деле не отображается рамка; он просто устанавливает, как будут выглядеть углы границы, если она есть.

Чтобы включить на границе, и , таким образом , получить ваши закругленные углы, вам также нужен borderатрибут ваших tdи thэлементов.

td, th {
   border:solid black 1px;
}

Вы также увидите закругленные углы, если у вас есть цвет фона (или графика), хотя, конечно, это должен быть цвет фона, отличный от окружающего элемента, чтобы закругленные углы были видны без рамки.

Стоит отметить, что некоторые старые браузеры не любят помещать border-radiusтаблицы / ячейки таблиц. Возможно, стоит поместить <div>внутрь каждой ячейки и стилизовать ее. Однако это не должно влиять на текущие версии любых браузеров (кроме IE, который вообще не поддерживает закругленные углы - см. Ниже).

Наконец, не то чтобы IE вообще не поддерживает border-radius(бета-версия IE9 поддерживает, но большинство пользователей IE будут использовать IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите http://css3pie.com/

[РЕДАКТИРОВАТЬ]

Хорошо, это меня беспокоило, поэтому я провел небольшое тестирование.

Вот пример JSFiddle, с которым я играл

Похоже, что самое важное, чего вам не хватало, было border-collapse:separate;в элементе таблицы. Это мешает ячейкам связывать свои границы вместе, что позволяет им подбирать радиус границы.

Надеюсь, это поможет.

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

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

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Лучшее решение, которое я нашел для закругленных углов и другого поведения CSS3 для IE <9, можно найти здесь: http://css3pie.com/

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

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

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Не беспокойтесь, если ваш Visual Studio CSS intellisense выдает зеленое подчеркивание неизвестных свойств, он все равно работает, когда вы его запускаете. Некоторые элементы не очень четко задокументированы, но примеры довольно хороши, особенно на первой странице.

Благодаря личному опыту я обнаружил, что невозможно скруглить углы ячейки таблицы HTML с помощью чистого CSS. Возможно закругление самой внешней границы стола.

Вам придется прибегать к использованию изображений, как описано в этом руководстве , или любых подобных :)

Это немного грубо, но я собрал кое-что, полностью состоящее из CSS и HTML.

• Наружные углы закруглены
• Строка заголовка
• Несколько строк данных

В этом примере также используется :hoverпсевдокласс для каждой ячейки данных <td>. Элементы можно легко обновить в соответствии с вашими потребностями, а наведение можно быстро отключить.

(Тем не менее, у меня еще нет :hoverвозможности правильно работать с полными строками <tr>. Последняя зависшая строка не отображается с закругленными углами внизу. Я уверен, что есть что-то простое, что упускается из виду.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Добавьте <div>обертку вокруг таблицы и примените следующий CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

в эту обертку.

Чтобы адаптировать блестящий ответ @luke funoy - и если вы не используете thв своей таблице, вот весь CSS, который вам нужен для создания округленной таблицы:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Для таблицы с полями и с возможностью прокрутки используйте это (замените переменные, $начальные тексты)

Если вы используете thead, tfootили th, просто замените ими tr:first-childи tr-last-childи td.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Вы можете попробовать это, если хотите, чтобы углы с каждой стороны таблицы закруглялись, не касаясь ячеек: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

Образец HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, легко конвертируемый в CSS, используйте sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

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

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Очевидно, что эта #contentblockчасть может быть заменена / отредактирована по мере необходимости, и вы можете найти border-radius.htcфайл, выполнив поиск в Google или в своем любимом веб-браузере.

Это css3будет поддерживать только недавний браузер, отличный от IE <9.

Посмотрите здесь , он выводит свойство round для всех доступных браузеров.

Добавьте между <head>тегами:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

и в теле:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Например, цвет, содержимое и форматирование ячеек;
речь идет о размещении цветных ячеек в div. При этом черные границы ячеек / границы таблицы фактически являются цветом фона div.
Обратите внимание, что вам нужно установить div-border-radius примерно на 2 значения больше, чем радиусы углов отдельных ячеек, чтобы получить эффект плавного закругленного угла.

Урок в границах таблицы ...

ПРИМЕЧАНИЕ. Приведенный ниже код HTML / CSS следует просматривать только в IE. Код не будет правильно отображаться в Chrome!

Нам нужно помнить следующее:

1. У таблицы есть граница: ее внешняя граница (которая также может иметь радиус границы).

2. Сами ячейки ТАКЖЕ имеют границы (которые тоже могут иметь радиус границы).

3. Границы таблицы и ячеек могут мешать друг другу:

   Граница ячейки может проходить через границу таблицы (например, границу таблицы).

   Чтобы увидеть этот эффект, измените правила стиля CSS в приведенном ниже коде следующим образом:
   i. таблица {border-collapse: отдельный;}
   ii. Удалите правила стиля, расположенные вокруг угловых ячеек таблицы.
   iii. Затем поиграйте с интервалом между границами, чтобы увидеть интерференцию.

4. Однако граница таблицы и границы ячеек могут быть СОВЕРШЕННЫ (используя: border-collapse: collapse;).

5. Когда они свернуты, границы ячейки и таблицы мешают по-другому:

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

   II. И наоборот, если угловые ячейки изогнуты, но граница таблицы квадратная, вы увидите уродливый квадратный угол, граничащий с кривизной угловых ячеек.

6. Учитывая, что атрибут ячейки имеет приоритет, можно обойти четыре угла стола следующим образом:

   я. Сворачивание границ на столе (используя: border-collapse: collapse;).

   II. Задайте желаемую кривизну угловых ячеек таблицы.
   iii. Не имеет значения, скруглены ли углы стола (т.е. его border-radius может быть нулевым).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}