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

Question

Я использовал HTML и CSS для стилизации своего резюме, но у меня возникают трудности при стилизации элемента

.

Разве это не работает внутри таблицы?

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

Answer 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 не будет работать в этих браузерах в любом случае.

Answer 2

Урок по границам таблицы ...

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

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

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

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

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

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

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

4. Однако границы таблицы и границы ячеек могут быть ОБЪЕДИНЕНЫ (с помощью: border-collapse: collapse;).

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

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

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

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

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

Answer 3

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

Answer 4

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

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

Answer 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.