Могу ли я сделать линию стола с закругленными углами?

Ответ 1

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

Если вы хотите округлить ряд ячеек, чтобы левый и правый элементы округлились, вам нужно использовать псевдо-классы :first-child и :last-child:

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

}

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

first-child не поддерживается IE6, и хотя IE7 добавляет поддержку для него, ему все еще не хватает last-child. Но в вашем случае это не имеет значения, так как border-radius не будет работать в этих браузерах.

Ответ 2

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

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

Нам нужно помнить, что:

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

• У самих ячеек также есть границы (которые тоже могут иметь радиус границы).

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

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

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

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

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

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

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

• Учитывая, что атрибут ячейки имеет приоритет, способ округления таблицы по четырем углам:

  я. Свертывание границ на столе (с использованием: 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>

Ответ 3

Я получил его для работы без таблицы, используя div, с помощью:

display: table-cell;
vertical-align: middle;

Ответ 4

tr td {
    border: 1px solid #dedede;
    border-radius:3px;
}

Ответ 5

<style type="text/css">
    .test 
    { 
        -moz-border-radius: 5px; 
        -webkit-border-radius: 5px; 
        border: #a9a9a9 1px solid; .
        width: 200px; 
        height: 50px; 
    }
</style>
<table class='test'>
    <tr>
        <td>
           this is a test
        </td>
    </tr>
</table>

Это работает для меня в Chrome и FF.