CSS cal c не работает на ячейке таблицы? Как сделать два (из 4 столбцов) одинаковой ширины? - PullRequest
0 голосов
/ 27 марта 2020

Не работает ли CSS cal c в ячейке таблицы? Если вы измените 90px на любой размер (например, 1px), отличный от 0, все будет выглядеть одинаково. Мы можем вычислить 800 * .4 - 90 - это 230, и, похоже, ничего из того, что я делаю с cal c, не подходит для этого числа.

Я пытаюсь сделать так, чтобы оба столбца p были 50% размера таблицы минус 90 пикселей, который использует столбец t

<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<style>
		table { width: 800px; }
		.t { width: 90px }
		.p { 
			width: calc(40% - 90px);
			-width: 230px;
		}
	</style>
	<table>
		<tr>
		<td class="t">Thing_____</td>
		<td class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
			desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
			<td class="t">Thing_____</td>
			<td class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
			It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
			desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</td>
	
		</tr>
	</table>
	</body>

	</html>

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Просто примените table-layout: fixed; к тегу основной таблицы. Это гарантирует, что если содержимое больше заданной ширины, оно не будет go из указанной ширины. В основном это заставляет приспосабливаться в данной ширине. Также calc(); работает, но вы должны знать, как устройство % ведет себя с таблицами.

1 голос
/ 27 марта 2020

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

table { width: 800px; table-layout:fixed;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...