Скругленные углы стола только CSS - PullRequest
Новая
       31

Скругленные углы стола только CSS

72 голосов
/ 08 февраля 2011

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

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

Table layout sketch

Закругленные углы для угловых ячеек и 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
}

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

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

Ответы [ 16 ]

71 голосов
/ 08 февраля 2011

Кажется, отлично работает в 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/

18 голосов
/ 30 июня 2012

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

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)

17 голосов
/ 08 февраля 2011

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

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

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

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

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

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

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

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

[EDIT]

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

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

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

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

6 голосов
/ 18 марта 2013

Лучшее решение, которое я нашел для закругленных углов и другого поведения CSS3 для IE <9, можно найти здесь: <a href="http://css3pie.com/" rel="nofollow noreferrer">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 дает зеленое подчеркивание для неизвестных свойств, он все еще работает, когда вы его запускаете.Некоторые элементы не очень четко задокументированы, но примеры довольно хороши, особенно на первой странице.

6 голосов
/ 08 февраля 2011

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

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

3 голосов
/ 16 ноября 2017

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

Чтобы получить верхние углы, установите радиус границы для первого и последнего типа элементов 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;
}
0 голосов
/ 23 ноября 2018

Это немного грубо, но вот кое-что, что я собрал, которое полностью состоит из 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>
0 голосов
/ 28 ноября 2017

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

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

Мы должны помнить, что:

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

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

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

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

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

  4. Однако границы таблицы и границы ячеек можно свернуть (используя: border-collapse: collapse;).

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

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

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

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

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

    ii.Установка желаемой кривизны в угловых ячейках таблицы.
    iii.Неважно, закруглены ли углы таблицы (то есть: ее радиус границы может быть нулевым).

			.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>
0 голосов
/ 13 февраля 2017

Добавьте между <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 значения больше радиусов границы отдельного угла ячейки, чтобы получить эффект плавного закругленного угла.

0 голосов
/ 08 июля 2016

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

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

к этой обертке.

Страница:
...