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.
Related
Working on something for school and the "Democrat" column is much wider than the "Republican" and "Independent" columns. I'd like those columns and rows to have equal width if possible, and not sure how to achieve this. I tried using style="width:xx%" and wasn't successful with that. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3" style="width:100%">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
Problem #1
I'd like those columns and rows to have equal width if possible,...
Rows (>tr>) are always equal in width in a <table> so long as the total of colspan are equal for each row. You have succeeded in doing so, so you only need to be concerned with column (<td>/<th>) width.
Problem #2
I have a table with spanned columns and rows, and want to center the last 3 rows
Issues
HTML tables behave differently than other types of elements in that they will automatically conform to the content within each cell (<td>/<th>) and at the same time adjust according to the the width of the <table> element. Setting the width directly to a cell will not work since the table and it's cells are always adjusting to find a balance between it's content and it's dimensions.
Also, it's invalid to have a <caption> outside of a <table>. <caption> (if used) must be the first child of a <table>. In addition, be mindful of multiple selectors such as the following example below which applies not only to <table>, but also to all <th> and <td> as well.
table,
th,
td {
width: 600px;
/* other rulesets */
}
The only reason why you don't have each cell at 600px width is because of how the <table> behaves.
Solution
Problem #1
By default <table> elements are assigned a CSS ruleset: table-layout: auto which is responsible for the behavior previously mentioned. If set to fixed, then each column width can be set directly by applying it to either a <colgroup> or <col> element, or a <th> (or a <td> in the first <tr> if there are no <th>).
In the example below each <col> is assigned a width of 120px via it's class .full (there are 5 columns instead of 6 so 120px x 5 = 600px).
Problem #2
In order to center the last 3 columns apply the following ruleset:
td {
align-text: center;
}
By default <th> is align-text: center so you only need to apply it explicitly to <td>.
Note, the example has been altered to what I believe to be semantically and aesthetically better and isn't a requirement.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fixed Table Layout Example</title>
</head>
<style>
html {
font: 300 2ch/1.2 "Segoe UI";
}
table {
table-layout: fixed;
min-width: 600px;
margin: 10px auto;
border-collapse: collapse;
}
caption {
margin-bottom: 6px;
font-weight: 900;
font-size: 1.15rem;
letter-spacing: 1.5px;
}
table,
th,
td {
border: 1px solid black;
}
td,
th {
padding: 4px;
}
tbody th {
padding-left: 8px;
text-align: left;
}
td {
text-align: center;
}
.full {
width: 120px;
}
.d {
background: rgba(0, 0, 255, 0.3);
}
.r {
background: rgba(255, 0, 0, 0.3);
}
p {
margin: 4px;
padding: 4px;
border-left: 4px solid #CCC;
font-weight: 700;
font-style: italic;
background: rgba(212, 175, 55, 0.5);
}
.brw th {
font-weight: 600;
}
.opinion {
padding: 12px 0 12px 8px;
border-left: 0;
font-weight: 600;
}
.majority {
font-weight: 600;
}
</style>
<body>
<table>
<caption>Today's Opinion Poll Question</caption>
<colgroup>
<col span="2" class="full">
<col class="full d">
<col class="full r">
<col class="full">
</colgroup>
<thead>
<tr>
<th colspan="2" rowspan="2" style="padding: 8px 6px; text-align: left">
<p>Do you favor or oppose increasing the minimum wage?</p>
</th>
<th colspan="3" scope="colgroup" style="background: #FFF">Political Party</th>
</tr>
<tr class="brw">
<th scope="col">Democrat</th>
<th scope="col">Republican</th>
<th scope="col">Independent</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup" style="border-right: 0;">Public Opinion</th>
<th class="opinion" scope="row">Favor</th>
<td class="majority">70%</td>
<td>35%</td>
<td class="majority">55%</td>
</tr>
<tr>
<th class="opinion" scope="row">Oppose</th>
<td>25%</td>
<td class="majority">60%</td>
<td>30%</td>
</tr>
<tr>
<th class="opinion" scope="row">Unsure</th>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</tbody>
</table>
</body>
</html>
Remove the style="width:100%" from the <th colspan="3" style="width:100%">Political Party</th> column. Because width: 100% here means that the width is going to be in inherited from the parent which is in this case is the <tr element and since this cell is supposed to span multiple cells in another row, the Democrat cell is taking an additional space. If you want a fixed width on all cells, you can set on th level in the styles. Hope this helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 600px;
padding: 2px;
word-spacing: 0px;
}
</style>
<body>
<caption><b>Do you favor or oppose increasing the minimum wage?</b></caption>
<table>
<tr>
<th colspan="2" rowspan="2">Today's Opinion Poll Question</th>
<th colspan="3">Political Party</th>
</tr>
<tr>
<th>Democrat</th>
<th>Republican</th>
<th>Independent</th>
</tr>
<tr>
<td rowspan="3" style="width:50%">Do you favor or oppose?</td>
<td>Favor</td>
<td>70%</td>
<td>35%</td>
<td>55%</td>
</tr>
<tr>
<td>Oppose</td>
<td>25%</td>
<td>60%</td>
<td>30%</td>
</tr>
<tr>
<td style="width:20%">Unsure</td>
<td>5%</td>
<td>5%</td>
<td>15%</td>
</tr>
</table>
</body>
</html>
Current HTML:
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Desired:
Question:
How can I add borders and width to my current HTML with CSS as the desired outcome?
What I have tried
I have tried the following css:
table {
border: 1px solid black;
}
This just puts a border around the table. How can I add it same as desired too?
table {
border-collapse: collapse;
/* if you don't add this line you will see "double" borders */
border: 1px solid black;
width: 100vw;
}
th{
color: white;
background-color: blue;
}
td{
background-color: white;
width: 70%;
}
td, th {
border: 1px solid black;
}
<section class="Product-Info">
<table>
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<th>Product Name:</th>
<td>Name</td>
</tr>
<tr>
<th>Product Description:</th>
<td>Description</td>
</tr>
</table>
</section>
Heres, your snippet!
simply this:
table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}
table th,
table td {
text-align: left;
border: 1px solid black;
}
demo here https://jsfiddle.net/3hpks1mL/
hope it help you
section {
width:100wh;
}
table{
width:100%
}
<section class="Product-Info">
<table border="1">
<tr>
<th colspan="2">Product Infromation</th>
</tr>
<tr>
<td>Product Name:</td>
<td >Name</td>
</tr>
<tr>
<td > Product Description:</td>
<td >Description</td>
</tr>
</table>
</section>
Fairly easy, in your example you just have to apply the desired background colour to the table header cells (th), like so:
th {
background: darkblue;
color: white; /* Assuming you don't want black text on dark blue. */
}
For the standard border around the table cells to disappear you have to simply collapse the border on the main table element, like so:
table {
border-collapse: collapse;
}
With that set you can now apply any border styling you want to your table, in any thickness, colour and style you want.
I'd go with the following:
table, th, td {
border: 1px solid black;
}
.Product-Info > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
text-align: center;
}
.Product-Info tr > *:first-child {
background: blue;
color: white;
text-align: left;
}
.w-25 {
width: 25% !important;
max-width: 25% !important;
}
.text-center {
text-align: center !important;
}
<section class="Product-Info">
<table>
<colgroup>
<col class="w-25 blue">
<col class="">
</colgroup>
<tr>
<th colspan="2" class="text-center">Product Infromation</th>
</tr>
<tr>
<th class="text-left">Product Name:</th>
<td class="text-center">Name</td>
</tr>
<tr>
<th class="text-left">Product Description:</th>
<td class="text-center">Description</td>
</tr>
</table>
</section>
Extra information (The "copy-paste" snippet under #Random-COSMOS answer).
Table is block-level element
"A block-level element always starts on a new line and takes up the
full width available. https://www.w3schools.com/html/html_blocks.asp"
Set any width you want to the table (400px or 30%) ==> 100% in your case (100% of its parent).
<table style="width: 100%;">
To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}
Out of topic - Accessible tables
For Web Accessibility => Add relationship between header and data cells (scope="row" / scope="col").
Full article: https://www.w3.org/WAI/tutorials/tables/two-headers/
<table>
<tr>
<th scope="col" colspan="2">Product Infromation</th>
</tr>
<tr>
<th scope="row">Product Name:</th>
<td>Some Name</td>
</tr>
<tr>
<th scope="row">Product Description:</th>
<td>Some Description</td>
</tr>
</table>
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 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;
}
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>