Checkbox in a CSS table won't show at minimal width

HTML & CSS
1

Similar to my question in May 2016, I’d like to use a CSS table, but for some checkbox options this time…

Problem seems to be that the < input > element seems to have some properties that I have to address for it to respond to the width:1%; command…?

It is now claiming about half the width of the table and I can’t get it to become narrow…

I tried a bunch of things, but it’s become wild guessing for me…

TIA! :slight_smile:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<style>
.cssTable {
	display:table;
	list-style:none;
	margin:0 auto;
	margin-left:0;
	padding:.375em 0 0 0;
	width:100%;
	max-width:960px;
}
.cssTable li {
	display:table-row;
}
.cssTable li span {
	display:table-cell;
	vertical-align:baseline;
	padding:0 0 .25em 0;
	color: #000;
	width:1%;	/* shrink cell to content width */
}

</style>
</head>

<body>

<ul class="cssTable">
	<li><span><input type="checkbox"></span><span>option 1</span></li>
	<li><span><input type="checkbox"></span><span>option 2</span></li>
</ul>

</body></html>
2

You have assigned a width of 100% to the table. The cells respond by filling that width in proportion to their assigned widths. Like speed limits, when the table has been assigned a width, cell widths are only a suggestion. :slight_smile:

put an outline around the spans to visualize the cells.
outline:1px dashed blue;

1 Like
3

My question is, “why does this ‘shrink cell’ trick work perfectly, for example, for an icon, and probably text, but not for this input element?”

I’m using the exact code with great success, but the input element makes it fail somehow…

4

I think I found the solution…

I’m putting the ‘shrink cell’ code on the first span only now. It should probably not be on both cells, I guess…

.cssTable li span {
	display:table-cell;
	vertical-align:baseline;
	padding:0 0 .25em 0;
	color: #000;
}
.cssTable li span:first-of-type {width:1%}

Thanks for your reply! :slight_smile:

2 Likes
5

No, because both cells would be the same width and as the table is 100% then they both stretch accordingly. If you shrink just one cell with the width then the other cell takes up all the slack automatically.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.