I have below snippet where td takes up space unnecessarily. For e.g. if the text contents inside td take 20 pixels width, td should also be 20 pixels wide. Can you help me fix it?
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
By default, table cells will expand in order to fit all their content and the width of the cell will depend on the widest cell in that column.
So trying to shrink-wrap a table-cell doesn't really make much sense.
If you do actually want a table-like layout, but you want a particular column to take up as little space as possible - you could set the cell width: 1px; - that will make the column as wide as the longest word in the cells of that column.
table {
table-layout: fixed;
}
tr {
width: 100%;
}
.td2{
width:auto;
max-width: 180px;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
width: 1px; /* <--- */
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
Please replace this code with your old code.
I hop here you find your solution.
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
.td2{
width:auto;
word-wrap: break-word;
background-color:red;
padding-left: 0;
padding-right: 0;
max-width: 180px;
}
.text{
max-width: 180px;
font-size: 14px;
}
span {
background-color: #7e7;
}
<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>
<table>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span class="text">Excessive exhaust materialssss</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
<tr>
<td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
<td class="td2"><span>Excessive</span></td>
<td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
</tr>
</table>
try adding the following css code
tr {
width: 100%;
display:table-row;
}
tr td
{
display:inline-block;
}
here is a link for reference
hope this helps..
Related
I am trying to make a table in HTML/CSS and I am having trouble with the width of the cells. When I put "width: 24%" in the "table td" in CSS the table cells stays in the size that I want. OK, great. But when I put "width: 15%" the table cells grows??? And when I put "width: 8%" it takes all the space of the page. Why?
Here is the HTML code of the table:
<table border="1">
<caption>RGB colors and their combinations</caption>
<tr>
<td> </td> <td bgcolor="#FF0000">RED</td> <td bgcolor="#00FF00">GREEN</td> <td bgcolor="#0000FF">BLUE</td>
</tr>
<tr>
<td bgcolor="#FF0000">RED</td> <td bgcolor="#FF0000"> </td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td bgcolor="#00FF00">GREEN</td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td bgcolor="#0000FF">BLUE</td> <td bgcolor="#FF00FF"> </td> <td bgcolor="00FFFF"> </td> <td bgcolor="#0000FF"> </td>
</tr>
</table>
And here is all the CSS code:
h1{
color: gray;
font-family: Bodoni, serif;
}
body{
text-decoration: blink;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding: 5%;
padding-top: 1%;
}
table{
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
caption{
caption-side: bottom;
}
.italico{
font-style: italic;
}
.img_flickr{
text-align: center;
padding-top: 2.5%;
}
.img_flickr > a > img{
width: 50%;
min-width: 200px;
}
table tr{
text-align: center;
}
table td{
width: 24%;
}
The total width should be 100%,
when you set width 20%, first cell width or other cell should be 40%.
please change style to:
table
{
width: 100%;
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
table td
{
width: 20%;
}
table td:first-child
{
width: 40%;
}
when you want to set style to first cell should be use below code
td:first-child
And when I put "width: 8%" it takes all the space of the page. Why?
That is a good question! I tried a few times, here is my observation:
Width of td is relative to it's parent, the tr. The tr is by default width:100% of the table.
Since you manipulate all the td tags, when you make them no longer fulfill the default 100% width of the table, the calculation of it's space may become buggy since this is not expected.
That would explain why, as soon as they're all < 25%, they begin to grow up.
The real question seems to be : what do you want to do ?
If you want the table to take larger or lesser space : manipulate it's width.
If you want some td to be larger than others : manipulate each of them while always making them all combined equal to the table width.
I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.
rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Firstly, this is a duplicate question: Equal-height scaling cells in an html table
The user that asked the question above didn't get a solution for the same issue I'm having.
Within the JSFIDDLE you will notice a cell with a red background. This cell is the highest and I need all other cells to pick up the highest cell height and span to the corresponding cell height.
The solution cannot contain fixed heights as this must be dynamic
Here is a mock up of what I'm trying to achieve: http://jsfiddle.net/pAz6G/
Here is HTML:
<table class="left" cellspacing="0" borderspacing="0" >
<tr>
<td>
<h2>Very Servere</h2>
<p>50m from high water on East Coast, 100m from high water on West Coast. Characterised by:</p>
<ul>
<li>Heavy salt deposits</li>
<li>The almost constant smell of saly spray in the air.</li>
<li>Close to breaking stuff (typically starts 50-100 metres) such as is found on exposed coasts.</li>
</ul>
<p>This environment may be extended inland by revailing winds and local coniditions</p>
</td>
</tr>
</table>
<table cellspacing="0" borderspacing="0" class="right">
<tr>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
<td class="section">
<span class="section-heading">Applications</span>
<table class="inner">
<tr>
<td>Roofing</td>
</tr>
<tr>
<td class="red">Rain washing plus manual washing every 3 months</td>
</tr>
<tr>
<td>Roofing</td>
</tr>
</table>
</td>
</tr>
</table>
Here is CSS:
/* Column Styling */
.left {
float: left;
width: 350px;
}
.left td {
padding: 10px;
}
.right {
float: left;
width: 400px;
}
/*********************************************/
/* General Styling */
.no-padding {
padding: 0;
}
td {
background: grey;
color: white;
vertical-align: top;
}
p {
margin: 0;
}
.red {
background: red;
}
/*********************************************/
/* Section Styling */
.section {
border-left: 1px solid #fff;
}
.section-heading {
display: block;
padding: 10px;
}
/*********************************************/
/* Nested Tables */
.inner {
width: 100%;
}
.inner td {
border-top: 1px solid #fff;
padding: 10px;
}
/*********************************************/
Instead of using multiple tables, try using one table.
Keeping it simple :)
http://jsfiddle.net/HnnHf/1/
Trying to understand what I do wrong. Plain table, I want input boxes to fill cells evenly. On first row you see 2 inputs and second row has one input spanned across cells.
Their right sides don't match. Why? When I run inspector it shows additional pixels?
Part of my HTML:
<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
<table>
<tr>
<td style="width: 80px;"><label>From </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>To </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>Sort by </label></td>
<td></td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="text" class="search" />
</td>
<td></td>
<td>
Refresh button
</td>
</tr>
</table>
</div>
Style:
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: central;
}
input.fill-space {
width: 100%;
}
input.search {
width: 100%;
background-image: url("/images/Search.png");
background-position: right center;
background-repeat: no-repeat;
}
</style>
My live site misalignment:
Also, why do I get this another border inside input if I set background?
Working fiddle: http://jsfiddle.net/ghUEw/
Default padding and margins for table elements differ in different browsers.
So you'd better use a CSS reset on table elements.
table * {
margin: 0;
padding: 0;
}
Then, comes the border-collapse property. It determines whether the table borders are collapsed into a single border or rendered individually, let's say for neighboring table cells. You need to set it as following to make them collapsed since you have different number of cells per table row.
table {
border-collapse: collapse;
}
Then, you need to set the borders of the inputs in your table if you want them look the same.
table input {
border: 1px solid #aaa;
}
If you don't want any borders to appear, replace it with border: none;
Then, in your CSS, for the labels to appear the way you want, you can apply float:right; (also corrected vertical-align: middle;)
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: middle;
float:right;
}
I want to make first input have the width 100% and second + image = 100% so that second input get the rest of the space (100%-img size) on the same line. Is it possible to do using CSS?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<input type="text" class="edt" /><img width="22px" src="cal.png" />
</td>
</tr>
</table>
</body>
</html>
Yes, this can be done with CSS. The trick is to use display: table and display: table-cell, where where width: 100% means "the rest of the available space".
Here is an example (with wrapper divs around .edt and the image link for better result): http://jsfiddle.net/zgw8q7vj/
The important CSS parts are these:
/*Use "table" layout in the 'data' cells,
and give them all the available width (after the captions)*/
.data {
display: table;
width: 100%;
}
/*Then give the textbox all the available remaining width...*/
.edt-wrapper {
display: table-cell;
width: 100%;
}
/*...after the image has claimed the space it needs*/
.img-wrapper {
display: table-cell;
}
If you don't want the caption column to take more space than it needs, you can even remove table-layout:fixed; and width: 35%; from .t and .caption
untested.
you didn't mention colspans can't be used, so this solution uses it.
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td colspan="3"><input type="text" class="edt" /></td>
<td class="data"><img width="22px" src="cal.png" />
</td>
</tr>
</table>
I have found that I can do it with tables. The question still remain, is it possible to do with div/css?
<html><head><title>width test</title>
<style type="text/css">
.t {
width: 100%;
table-layout:fixed;
}
.caption {
text-align: left;
width: 35%;
}
.data {
text-align: left;
width: 65%;
}
.edt {
width: 100%;
}
.joiningtable
{
border-spacing:0px;
border-collapse:collapse;
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningrest
{
width:100%;
margin:0px;
border:0px;
padding:0px;
}
.joiningfixed
{
margin:0px;
border:0px;
padding:0px;
}
</style>
</head>
<body>
<table class="t">
<tr>
<td class="caption">Caption:</td>
<td class="data"><input type="text" class="edt" /></td>
</tr>
<tr>
<td class="caption">Caption:</td>
<td class="data">
<table class="joiningtable">
<tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><img src="cal.png" /></td><tr>
<table>
</td>
</tr>
</table>
</body>
</html>
If you're still interested, it is possible but you need to use a little magic..
With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.
<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>
</body>
</html>
P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.