Max-width on table-cell?

I have this:

<div class="row">
 <div class="kategorier">
  <div class="kategori"></div>
  <div class="kategori"></div>
  <div class="kategori"></div>
  <div class="kategori"></div>
 </div>
 <div class="kategorier">
  <div class="kategori"></div>
  <div class="kategori"></div>
 </div>
</div>
	.kategorier{
		display: table;
		width: 100%;
	}

	.kategorier .kategori{
		width: 25%;
		background: #eee;
		border: 5px solid #fff;
		display: table-cell;
	}

And my problem is that even when giving “kategori” the width of 25% it will get the width of 50% if there are only two “kategori” in “kategorier”. I want to give each a fixed width of 25% is this possible when using table-cells?

Hi,

You are creating a table with 2 cells and giving them a width of 25%. That won’t add up to 100% so the cells will get stretched to fit the table.

If you kept the whole lot in a single table then your cells would honour the width:

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.kategorier {
	display: table;
	width: 100%;
}
.kategorier .kategori {
	width: 25%;
	background: #eee;
	border: 5px solid #fff;
	display: table-cell;
}
.tr { display:table-row }
</style>
</head>

<body>
<div class="kategorier">
		<div class="tr">
				<div class="kategori">1</div>
				<div class="kategori">2</div>
				<div class="kategori">3</div>
				<div class="kategori">4</div>
		</div>
		<div class="tr">
				<div class="kategori">1</div>
				<div class="kategori">2</div>
		</div>
</div>
</div>
</body>
</html>


There must be 4 items in one table row to maintain the integrity of the table.

It’s the same with an html table and if you only have two cells then they must both occupy the whole available space of the table.

To solve this problem, you have to use ‘max-width’ in place of ‘width’. See the similar example code snipet for more information,

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

Hi, I don’t see how that addresses the problem in hand and will do nothing as far as I can see?

The max width on table-cells is undefined in the specs anyway and not something you really want to use.