[HTML/POMOC] Elementy w tabelach.

pytanie zadane 17 października 2020 w HTML i CSS przez Kazafka Nowicjusz (200 p.)

Cześć,

Mam pewien problem z tabelami, a dokładniej, nie wiem kompletnie jak mogę wystylizować komórkę tabeli tak, aby elementy zawarte w niej, takie jak np, tekst, nie przechodziły do kolejnej linii podczas zwijania owej komórki. W praktyce wygląda to tak:

A tak po rozwinięciu bocznego menu:

Tutaj macie jeszcze kod źródłowy:

<html>
	<head>
		<meta charset="utf-8"/>
		<title>A HTML website</title>
	</head>
	
	<style>
		body {
			margin: 0px 0px 0px 0px;
		}

		table {
			border-collapse: collapse;
			width: 100%;
			height: 100%;
			position: relative;
		}

		td {
			padding: 10px 10px 10px 10px;
		}

		#head {
			height: 25px;
			position: sticky;
			background-color: #fcba03;
			color: #272d30;
		}

		#nav {
			background-color: #272d30;
			color: #d9d9d9;
			max-width: 1px;
			overflow: hidden;
			width: 1px;
			transition: width 1s;
		}

		#nav:hover {
			width: 300px;
		}
	</style>

	<script>
	</script>
	
	<body>
		<table>
			<tr>
				<td id="head" colspan="2">Header</td>
			</tr>

			<tr>
				<td id="nav">
					<p>Hello! I am a navigation bar!</p>
				</td>
				<td id="bdy">
					<p>Welcome! I am the body!</p>
				</td>
			</tr>
		</table>
	</body>
</html>

2 odpowiedzi

odpowiedź 17 października 2020 przez ScriptyChris Mędrzec (190,190 p.)

Możesz na komórce tabeli użyć stylu white-space z wartością nowrap.

komentarz 17 października 2020 przez Kazafka Nowicjusz (200 p.)

Cześć,

Dzięki za, pomocną, odpowiedź. Nie wiedziałem, że istnieje styl o nazwie white-space. Tym razem będę pamiętał.

Na razie!

odpowiedź 18 października 2020 przez VBService Ekspert (256,320 p.)
edycja 18 października 2020 przez VBService

A Complete Guide to the Table Element

37 CSS Tables

May 22, 2020

Collection of free HTML and CSS table code examples: simple, responsive, pricing, periodic, etc.

CSS Table Properties

Property Description

border Sets all the border properties in one declaration

border-collapse Specifies whether or not table borders should be collapsed

border-spacing Specifies the distance between the borders of adjacent cells

caption-side Specifies the placement of a table caption

empty-cells Specifies whether or not to display borders and background on empty cells in a table

table-layout Sets the layout algorithm to be used for a table

Property	Description
border	Sets all the border properties in one declaration
border-collapse	Specifies whether or not table borders should be collapsed
border-spacing	Specifies the distance between the borders of adjacent cells
caption-side	Specifies the placement of a table caption
empty-cells	Specifies whether or not to display borders and background on empty cells in a table
table-layout	Sets the layout algorithm to be used for a table