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

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

у меня есть простая таблица OL ' HTML. Мне нужны для этого круглые углы,без использование изображений или JS, т. е. pure только 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
}

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

какие решения?

62
css html html-table rounded-corners

15 ответов

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

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

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/

63

во-первых, вам нужно больше, чем просто -moz-border-radius Если вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая plain 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 beta делает, но большинство пользователей IE будут на IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите наhttp://css3pie.com/

[EDIT]

хорошо, это меня достало, поэтому я сделал некоторые тесты.

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

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

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

17

для меня Twitter Bootstrap Решение выглядит хорошо. Он исключает IE

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)

14

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

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

6

лучшее решение, которое я нашел для закругленных углов и другого поведения CSS3 для IEhttp://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 дает вам зеленое подчеркивание для неизвестных свойств, оно все еще работает при его запуске. Некоторые элементы не очень четко документированы, но примеры очень хороши, особенно на первой странице.

5

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

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

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

если вы используете 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>
0

CSS:

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

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

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

пример 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/

0

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

#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 или вашем любимом веб-браузере.

0

Это css3, только последние не-IE

проверить здесь, он получает круглое свойство для всех доступных браузеров

0

добавить между <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

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

Примечание: код HTML / CSS ниже следует просматривать только в IE. Код не будет отображаться правильно в Chrome!

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

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

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

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

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

    чтобы увидеть этот эффект, измените правила стиля CSS в приведенном ниже коде следующим образом:
    Я. таблица {border-collapse: separate;}
    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>,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>3,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>,001,000</td>
				</tr>
			</tbody>
		</table>
0

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

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

в этот фантик.

-1