I've got a table like the one pictured above, which uses both colspan and rowspan. I want to fix all the column widths. I can do the first and last (No and Remark), and I can set the width of Types. How can I specify the widths of A, B and C?
I've tried giving cells A, B and C CSS classes and setting individual widths but this does not have any effect. The widths are always controlled by any content in the cells below.
table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
th, td {
border:solid 1px #000;
padding:.5em;
}
.no {
width:10%;
}
.type {
width:50%;
}
.remark {
width:40%;
}
/* these don't work */
.type-a {
width:10%;
}
.type-b {
width:15%;
}
.type-c {
width:25%;
}
<table>
<thead>
<tr>
<th rowspan="2" class="no">No</th>
<th colspan="3" class="type">Type</th>
<th rowspan="2" class="remark">Remark</th>
</tr>
<tr>
<th class="type-a">A</th>
<th class="type-b">B</th>
<th class="type-c">C</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Is it possible without resorting to placing fixed width divs inside the cells?
change table-layout:auto
table {
border-collapse:collapse;
table-layout:auto;
width:100%;
}
Change the table-layout property to auto:
table {
border-collapse:collapse;
table-layout: auto;
width:100%;
}
th, td {
border:solid 1px #000;
padding:.5em;
}
.no {
width:10%;
}
.type {
width:50%;
}
.remark {
width:40%;
}
/* these don't work */
.type-a {
width:10%;
}
.type-b {
width:15%;
}
.type-c {
width:25%;
}
<table>
<thead>
<tr>
<th rowspan="2" class="no">No</th>
<th colspan="3" class="type">Type</th>
<th rowspan="2" class="remark">Remark</th>
</tr>
<tr>
<th class="type-a">some long text to see the width remains the same </th>
<th class="type-b">B</th>
<th class="type-c">C</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Related
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>
Here is html and CSS code:
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<div class="hi">
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
Output
Here background color blue for class hi not shown
so what can be the reason
and what is the possible solution for this
If you use div as anything other than a cell value, you'll get misbehaving browsers.
Wrap your header row definition around the thead tag and style that instead. Don't forget to then wrap the body around tbody.
table,
th,
td {
border: 1px solid blue;
border-collapse: collapse;
}
td {
text-align: center;
}
td {
padding: 10px;
color: #cc7722;
}
table {
border-spacing: 5px;
background-color: yellowgreen;
font-weight: bold;
width: 100%
}
#hello {
color: red;
}
.hi {
background-color: blue;
}
<table>
<caption id="hello">Employee Data</caption>
<thead class="hi">
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</tbody>
</table>
you can't use a div within a table for styling. just apply the class to the tr itself
html
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
Your table shouldn't have a div inside, instead you have to do like this:
<tr class="hi">
add div inside th,td it'll work not outside
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr>
<th>Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</div>
</tr>
<tr>
<td><div class="hi">Vaibhav</div></td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
I think what you want to do is changing the <tr> background, which you can easily accomplish by removing your <div> and giving the class to your <tr> tag. As the following:
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th>Employee Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
And your CSS is just the same.
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
Does moving the class to the th accomplish what you are wanting?
table,th,td{
border:1px solid blue;
border-collapse:collapse;
}
td{
text-align:center;
}
td{padding:10px;
color:#cc7722;
}
table{
border-spacing:5px;
background-color:yellowgreen;
font-weight:bold;
width:100%
}
#hello{
color:red;
}
.hi{
background-color:blue;
}
<table>
<caption id="hello">Employee Data</caption>
<tr class="hi">
<th >Employee Name</th>
<th>
Department
</th>
<th>Salary</th>
</tr>
<tr>
<td>Vaibhav</td>
<td>CSE</td>
<td>10000</td>
</tr>
</table>
If possible to change html then You can use combination of thead, tbody to set different colors to table head and body.
Example
<style>
thead {color:green;}
tbody {background:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
All tr in tbody will have background blue.
Otherwise you have to use styling for tr, th separately
I want to have a fixed width for my editable table, but I also wanting to set different width for each TD.
In my attempt I am able to get the table set at a fixed width, but this causes the width of the TDs appear to be 50% instead of the 80% - 20% I had before setting the fixed width
CSS
table {
margin: 15px 0;
border: 1px solid black;
table-layout: fixed;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
HTML
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</table>
What am I missing? Check this Fiddle if it will help. Try it out by typing enough to see it automatically goes to the next line after a certain point.
The problem with your code is that your first <tr> is having colspan="2". So when you give a width:100% to all the TDs of the table, the css won't get applied to the underlying TDs as you want.
Your solution is to separate the Header td: <td colspan="2">Header:</td> into a separate table (Refer HTML-1 below)
or
put the underlying TDs in the same TR as that of the header (Refer HTML-2 below).
Also change the CSS and simplify it like I did below. you have written a lot of unnecessary CSS.
Working Fiddle Here
Here's what I tried. try this:
HTML-1:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
</tbody>
</table>
<table class="fixed" >
<tbody>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</table>
HTML-2:
<table class="fixed" >
<tbody>
<tr>
<td colspan="2">Header:</td>
<tr>
<td>Name:</td>
<td>test</td>
</tr>
<tr>
<td>DOB::</td>
<td>tes</td>
</tr>
<tr>
<td>Comments:</td>
<td>test</td>
</tr>
</tr>
</tbody>
</table>
Simplified CSS:
table {
margin: 0 0;
width: 100%;
table-layout: fixed;
}
.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}
.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }
You have Errors in your html syntax although that is nothing to do with the problem.
See if you need something like this fiddle.
table {
margin: 15px 0;
border: 1px solid black;
width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
border:1px solid #000; }
<div class="fixed" contenteditable="true">
<table>
<tbody>
<tr>
<td colspan="2">Header:</td>
</tr>
<tr>
<td>Name:</td>
<td><br/></td>
</tr>
<tr>
<td>DOB::</td>
<td><br/></td>
</tr>
<tr>
<td>Comments:</td>
<td><br/></td>
</tr>
</tbody>
</table></div>
otherwise you wont be able to achieve variable td width as all the td will have same width in a column.
you can use colspan attribute for a workaround.
I am having trouble align the columns in my table with their table headings, the strange thing that is aligns in the Jsfiddle here with no problems: http://jsfiddle.net/m4HB3/68/
But in my application with the exact same code, it does no align the columns correctly with their headings: application
My question is what do I need to include in the application in order to fix this alignment issue in the application?
Below is code:
HTML:
<table id="tableqanda" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="5%" class="questionno">Question No</th>
<th width="23%" class="question">Question</th>
<th width="7%" class="option">Option Type</th>
<th width="6%" class="noofanswers">Number of Answers</th>
<th width="7%" class="answer">Answer</th>
<th width="6%" class="noofreplies">Number of Replies</th>
<th width="6%" class="noofmarks">Number of Marks</th>
<th width="11%" class="image">Image</th>
<th width="11%" class="video">Video</th>
<th width="11%" class="audio">Audio</th>
</tr>
</thead>
</table>
<div id="tableqanda_onthefly_container">
<table id="tableqanda_onthefly" cellpadding="0" cellspacing="0">
<tbody>
<tr class="tableqandarow">
<td width="5%" class="questionno">Question No.</td>
<td width="23%" class="question">Question</td>
<td width="7%" class="option">Option</td>
<td width="6%" class="noofanswers">Number of Answers</td>
<td width="7%" class="answer">Answer</td>
<td width="6%" class="noofreplies">Number of Replies</td>
<td width="6%" class="noofmarks">Number of Marks</td>
<td width="11%" class="image"><ul><li>Image</li></ul></td>
<td width="11%" class="video"><ul><li>Video</li></ul></td>
<td width="11%" class="audio"><ul><li>Audio</li></ul></td>
</tr>
</tbody>
</table>
</div>
CSS:
#tableqanda_onthefly_container
{
max-height: 25px;
width: 100%;
overflow-y: scroll;
}
#tableqanda_onthefly
{
width:100%;
clear:both;
table-layout: fixed;
}
#tableqanda_onthefly td
{
border:1px black solid;
border-collapse:collapse;
}
#tableqanda, #tableqanda_onthefly{
border:1px black solid;
border-collapse:collapse;
word-wrap:break-word;
}
#tableqanda{
width:97%;
margin-left:0;
table-layout: fixed;
float:left;
}
#tableqanda td {
vertical-align: middle;
border:1px black solid;
border-collapse:collapse;
}
#tableqanda th{
border:1px black solid;
border-collapse:collapse;
text-align:center;
}
.tableqandarow{
border:1px black solid;
border-collapse:collapse;
}
.imagetd{
font-size:75%;
}
.audiotd{
font-size:75%;
}
.videotd{
font-size:75%;
}
.qandaul{
list-style-type:square;
}
ul, ul li { margin: 0; padding: 0; }
ul { margin-left: 1.3em; }
Your column widths don't add up to 100%; if you leave it to the browser to resolve this, you can't be certain that the alignment will match what you have in your head.
Change the widths to add up to 100% and you should be fine.
If you look at all of my <th> tags in the <thead> tag in the table, you can see if each <th> has its own class: col1, col2, col3 and col4.
I am trying to set a max and min width for each of those classes, the problem is that it is not setting the width at all. If set the width using percentage then it doesn't work, but it does work using px, but I want to use percentage, so why is it not setting the width?
Below is table code:
<div id="tableWrapper">
<div id="tableScroll">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="col2">Question No</th>
<th class="col4">Question</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
<th class="col2">Weight(%)</th>
<th class="col1">Answer</th>
<th class="col3">Video</th>
<th class="col4">Audio</th>
<th class="col3">Image</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
Below is css;
#qandatbl{
font-size:14px;
border-collapse:collapse;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.col1{
background-color:#FCF6CF;
max-width:7%;
min-width:7%;
border: 1px solid black;
}
.col2{
background-color:#FEFEF2;
max-width:7%;
min-width:7%;
border: 1px solid black;
}
.col3{
background-color:#FEFEF2;
max-width:16%;
min-width:16%;
border: 1px solid black;
}
.col4{
background-color:#FCF6CF;
max-width:16%;
min-width:16%;
border: 1px solid black;
}
#tableWrapper {
position:relative;
}
#tableScroll {
height:300px;
overflow:auto;
margin-top:20px;
}
#tableWrapper thead tr {
position:absolute;
top:-24px;
}
1- set a width for the table
2- adjust your percentages so that their sum is 100% (taking into account the number of times each type of column appears, which seems to be twice each).