I have a table with two columns, first column 65%, second 35%. It perfectly fits to 100% of screen, if first column has enough text in it to fill that 65%, but if it is empty (or small amount of text) - then first column shrinks and second expands.
How can I make first column ALWAYS 65% of screen, with or without text?
Try this:
<table class="fixed_width">
<col width="65%" />
<col width="35%" />
<tr>
<td>your data</td>
<td>your data</td>
</tr>
</table>
And CSS:
table.fixed_width { table-layout:fixed; }
table.fixed_width td { overflow: hidden; }
<table>
<tr>
<td style="width: 65%;">
first column
</td>
<td style="width: 35%;">
second column
</td>
</tr>
</table>
The first column will always stay 65% unless, you put something inside that is larger then 65% (a large picture for example)
Try adding this CSS:
table {
table-layout: fixed;
empty-cells: show;
}
https://developer.mozilla.org/en-US/docs/CSS/empty-cells
https://developer.mozilla.org/en-US/docs/CSS/table-layout
#kalpesh's recommendation for <colgroup> is a good one too.
https://developer.mozilla.org/en-US/docs/HTML/Element/colgroup
try this css :
.table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
.td1 {
border: 1px solid #000;
width: 65%;
}
.td2{border: 1px solid #000;
width: 35%;
}
and
<table class="table">
<tr>
<td class="td1">data</td>
<td class="td2">data</td>
</tr>
</table>
Related
I have several tables. Some have 4 td in a row, some have 3 td in a row. Is there any smart way to make those td equal depend on the number of td in a row, since I don't want to write a specific css for each case.
For example, if a row have 4 td, each td's width should be 25% and 33.33% if a row have 3 td.
I'm using scss.
Edit: I'm also looking for a way that also meet this condition too: in a table, there is two rows, the first row has 2 td, the second row has 3 td and this table still meet my requirement.
For example, in this case, I want the td in the first row (which has 1 td) will have 100% width, not 25%
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Thank you.
Use Below CSS
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
Check Example here:- https://codepen.io/rvtech/pen/yLyewjG
You just need to use a fixed table layout and set the width of the table. I have included a few examples below.
.myTable, .subTable {
width: 200px;
table-layout: fixed;
}
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h1>1. table in a table(use a sub table that uses the same css)</h1>
<table class="myTable">
<tr>
<td>apple pie</td>
<td>orange tart</td>
<td>blueberry crumble</td>
</tr>
<tr>
<table class="subTable">
<tr>
<td>apple pie</td>
<td>orange chocolate</td>
</tr>
</table>
</tr>
<tr>
<table class="subTable">
<tr>
<td>meat pie</td>
<td>apple crumble</td>
<td>cranberry jam</td>
</tr>
</table>
</tr>
</table>
<hr>
<h1>2. use colspans that you will have to set via hand or javascript</h1>
<table class="myTable">
<tr>
<td>pumpkin pie</td>
<td>banana tart</td>
</tr>
<tr>
<td colspan="2">
blueberry pie
</td>
</tr>
</table>
<hr>
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>
I'd like to set width on the td in tbody which is underneath thead that has colspan="2" with an hard defined column width in %. The browser shell not dynamically adjust table width.
.sample {
width: 100%;
table-layout: fixed;
}
.sample td:nth-child(1),
.sample th:nth-child(1) {
width: 30%;
}
.sample td:nth-child(2),
.sample th:nth-child(2) {
width: 70%;
}
<table class="sample" border="1">
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>30%</td>
<td>70%</td>
</tr>
</tbody>
</table>
The above style works if thead is removed but does not work with it.
Important notes,
I added the table-layout: fixed; since I need the columns to be exactly as width as specified. Using table-layoud: auto; results in the browser taking the specified width as on orientation but still dynamically adjusting width.
EDIT
The accepted answer solved my question above. However I'm not able to use colgroup since I'm using a WYSIWYG editor. Thus I added a follow up question with detailed specifications here.
Try using <colgroup> and <col> tags:
.sample {
width: 100%;
table-layout: fixed;
}
<table class="sample" border="1">
<colgroup>
<col style="width:30%;">
<col style="width:70%;">
</colgroup>
<thead>
<tr>
<th colspan="2">Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>30%</td>
<td>70%</td>
</tr>
</tbody>
</table>
just change your css that is so confusing for me. change it to follow
.sample {width: 100%;}
.sample td:nth-child(1) {width:30%;}
.sample td:nth-child(2) {width:70%;}
of you wish that table looks good then you can give border so that u have clear idea about it.
<table class="sample" border="1px grey solid">
..
</table>
The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.
<table border="1" style="width:850px">
<tr>
<td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
<td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
</tr>
<tr style="vertical-align:top">
<td style="vertical-align:top">2.Row Cell 1</td>
</tr>
</table>
OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?
So there is your solution in the snippet below :
table , td, th {
border: 1px solid #595959;
border-collapse: collapse;
}
td, th {
padding: 3px;
width: 250px;
height: 150px;
}
th {
background: #f0e6cc;
}
.even {
background: #fbf8f0;
}
.odd {
background: #fefcf9;
}
<table>
<tbody>
<tr>
<td style="height:1em">This is a test thank you for your attention</td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Hope it help.
Adding a height: 1em; seemed to work - like this for the first cell:
<td style="width: 50%; vertical-align: top; height: 1em;">
I need an html table with fixed header and scrollable content. I am working using spring and jsp. The code is something like
<table class="resultsTable" border="1" bordercolor="grey" cellpadding="0" cellspacing="0" width="100%" height = "50%">
<thead class="fixedHeader">
<tr>
<th width="20%">Name</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
<th width="20%">Parameter1</th>
</tr>
</thead>
<tbody class="scrollContent">
<c:forEach var=" object" items="${objectsList}"
varStatus="loopStatus">
<tr class="${loopStatus.index % 2 == 0 ? 'even' : 'odd'}">
<td width="20%">${ object.name}</td>
<td width="20%">${ object.param1}</td>
<td width="20%">${ object.param2}</td>
<td width="20%">${ object.param3}</td>
<td width="20%">${ object.param4}</td>
</tr>
</c:forEach>
</tbody>
</table>
and css is
table.resultsTable {
width: 900px;
border: 2px solid grey;
border-radius: 8px;
}
thead.fixedHeader tr {
position: relative;
display: block;
width: 100%;
background-color: grey;
}
tbody.scrollContent {
display: block;
height: 350px;
overflow: auto;
width: 100%;
}
What i expect is column width must be the same. But I get columns with decreasing widths ie. column1 has greatest width and then goes on reducing. 5 th column being smallest width. Why is this happening?
please remove the width attribute form both tbody and thead.
Also remove the width attribute in as you have already set the width in
means 20% width of the table i.e. 20% of 900px.