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>
Related
I'm building a table for my website, and I'm trying to place a logo inside of a data cell. The issue is that whenever I add the picture, the margins go really weird and I can't figure out why spacing is added. I tried to remove the padding and margins on the image, and the cell itself, but nothing fixes it.
Before image:
After image:
HTML:
<table class="table">
<thead class="tablehead">
<tr>
<th>Language</th>
<th>Year Initiated</th>
<th>Projects</th>
</tr>
</thead>
<tbody class="tablebody">
<tr>
<td><img src = "images/Java_Logo.png" class="tableimage"></td>
<td>2015</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>C#</td>
<td>2016</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>Python</td>
<td>2018</td>
<td>ENTER LINK</td>
</tr>
<tr>
<td>HTML and CSS</td>
<td>2018</td>
<td>ENTER LINK</td>
</tr>
</tbody>
</table>
CSS:
.table{
margin: auto;
}
.tablehead{
font-family: permanent marker;
font-size: 24px;
}
.tablebody{
font-family: body;
font-size: 20px;
}
.tableimage{
width: 15%;
padding:0px;
margin: 0px;
}
th, td{
border-bottom: 1px rgb(146, 40, 40) solid;
padding: 10px;
margin: 0;
}
I've also already tried multiple different images, so this does not seem to be the issue. I'd like all three columns to take up 1/3 of the space each.
Another option is to use this, which changes the behavior of the table overall. (Set your preferred width, or nothing at all):
table {table-layout: fixed; width: 50%;}
You only need to specify a width for the table cells. Try adding this to your CSS:
th, td {
width: 33%;
}
The table must some other css affecting it. When I put your code into JSFiddle, it seems to work the way you want. See example: https://jsfiddle.net/ruben/xg2joc1y/5/
You could try adding some css to your image:
.table img {
display: inline;
}
I am using angular js 1.3 here. What I have is a modal up which when clicked adds an column to existing table, the name of the column is based upon the selection made in the modal. One can add as many columns here. All this works fine. What my issue is that I am not sure how to maintain fixed column width and scrolling.
The width of the column keeps decreasing when more columns are added and even the scrolling does not comes out properly.
Sorry the code is a lot so just posting some code together with jsfiddle here:
http://jsfiddle.net/aman1981/u1vbeos5/107/
<div class="panel-body">
<table class="table table-bordered">
<colgroup>
<col class="unique-id">
</colgroup>
<thead>
<tr>
<th class="unique-id">Name #</th>
<th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
<!--<th class="view-next-set">...</th>-->
<td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="r in targetTable.rows">
<td contenteditable="true" class=""></td>
<td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined"></td>
<!--<td class="blank" colspan="2"></td>-->
</tr>
</tbody>
</table>
</div>
Also here is the image:
https://imgur.com/a/qCn1AO7
So you can set a minimum width fot your .table td and .table th
.table td,
.table th {
min-width: 120px;
}
And you can set the overflow of you .panel-body as auto:
.panel-body {
overflow: auto;
}
http://jsfiddle.net/u1vbeos5/116/
You have to set min-width and max-width to th and oveflow: auto to .panel-body....
Check below CSS
.table th {
max-width: 120px;
min-width: 120px;
}
.panel-body{
overflow: auto;
}
What I end up doing was to add the below classes to TD and Panel:
.fixed-width {
min-width: 50px !important;
width: 50px !important;
}
.panel-body {
overflow: auto;
}
Can the background color on a table's caption be changed with CSS?
The captions on my tables are currently using the background behind them and I would like to make the caption's background a different color.
If so what is the CSS property ?
Here is my current CSS
.Table {
margin:0px;padding:0px;
width:100%;
border:1px solid #4c4040;
-moz-border-radius-bottomleft:8px;
-webkit-border-bottom-left-radius:8px;
border-bottom-left-radius:8px;
-moz-border-radius-bottomright:8px;
-webkit-border-bottom-right-radius:8px;
border-bottom-right-radius:8px;
-moz-border-radius-topright:8px;
-webkit-border-top-right-radius:8px;
border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-webkit-border-top-left-radius:8px;
border-top-left-radius:8px;
}
.Table table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}
And my HTML
<div class="Table" >
<table align='center' summary='blank Sum'>
<caption><br>
Please enter the Emails of the people you want to invite.
<br> <br>
</caption>
<tr>
<td>Party ID</td><td>Party Name</td><td>Date</td><td>Sales</td>
<td>blah</td> <td>blah</td> <td>blah</td><td>blah</td>
</tr>
</table>
</div>
Quick answer
Have a fiddle!
CSS
table caption { background: #F00; }
Slower Answer
The .Table div seems superfluous. I would have something like this:
Have a fiddle!
HTML
<table summary='blank Sum'>
<caption>
Please enter the Emails of the people you want to invite.
</caption>
<thead>
<tr>
<th>Party ID</th>
<th>Party Name</th>
<th>Date</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
CSS
table {
width: 500px; /* whatever width */
margin: 0 auto; /*center table*/
}
table caption {
padding: 10px;
background: #F00;
}
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.
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>