After some testing i've found that Chrome doesn't calculate the THEAD column width depending on the TBODY elements, as Opera does. Is there a way to avoid specifying this in the thead? Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
table{
width:800px;
border:1px solid #CCCCCC;
table-layout: fixed;
border-spacing:0px;
box-sizing: border-box;
}
table td.option{
width:100px;
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table td.active{
text-align:center;
width:100px;
}
td.thead{
/* something that makes that width: is depending on the total width of the tbody elements */
}
table td.nonfixed{
width:100%;
}
</style>
<title>Untitled</title>
</head>
<body>
<table>
<thead>
<tr>
<td class="thead">Name</td>
<td class="thead">Description</td>
<td class="thead">Active</td>
<td class="thead" colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="100">+ Add new row</td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is solved with adding an <colgroup> element. Chrome uses the first row (tr or colgroup) to determine the td width. This solution encounters some problems in older versions of IE, that doesn't support td width with percentages.
Related
I built a table in HTML:
But the problem is that I could not center the table to the center of the screen, and I could not arrange it in such a way that the columns would be without indentations, and one below the other (i.e. 'aaaaa' would be below 'Name', 'bbbbb' would be below 'address' and 'ccccc' would be below 'phone').
Do you have any idea how to center the table and how to align the columns so that they will be without indentations? Thanks in advance!
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
This is a simple exercise in CSS- use margin: 0 auto to center it horizontally.
You could also do this with flex or other stylnig to suit as well. I added some borders and spacing for the ths and tds to demonstrate the alignment.
You can also style the content of the th's and the td's to give specific styling for each - eg- have the th a different font-size and color than the td's - but still have them left-aligned.
EDIT - I have just noticed that you have divs inside the table - this is invalid - the only valid child of a tbody - is a tr element. I have removed them from the code in my solution - sorry I didn't see that vbefore - dangers of copy / paste.
table {
border: solid 1px #e1e1e1;
border-collapse: collapse;
margin: 0 auto;
}
th, td{
border: solid 1px #e1e1e1;
padding: 4px 8px
}
th {
font-size: 12px;
color: #b9b9b9;
text-align: left
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td >aaaaa aaaaa </td>
<td >bbbbb bbbbb</td>
<td >ccccc ccccc</td>
</tr>
</tbody>
</table>
https://www.w3schools.com/howto/howto_css_table_center.asp
Add class="center" to the table html tag
<table class="center" id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</div>
</tbody>
</table>
and add some CSS, such as
.center {
margin-left: auto;
margin-right: auto;
}
or (even simpler):
.center {
margin: 0 auto;
}
table{
margin:0 auto;
}
th,td{
text-align:left;
}
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Adress</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<div>
<tr>
<td >a</td>
<td >b</td>
<td >c</td>
</tr>
</div>
</tbody>
</table>
Please amend you codes to something similar to :
.div1{
width:100%;
}
table, th, td {
border: 1px solid black;
}
.table1{
margin: 0 auto;
}
<div class=div1>
<table class=table1>
<tr>
<td>Name</td>
<td>Adress</td>
<td>Phone</td>
</tr>
<tr>
<td >aaaaa</td>
<td >bbbbb</td>
<td >ccccc</td>
</tr>
</table>
</div>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
I am trying to design the following table using html and css how do I proceed with it. Thank you in advance.
This solution will save you from having to use nested tables. The trick is that you really have four rows, not three, and make use of colspan and rowspan.
Note that you need to set a height for the td in order to ensure they are even.
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
height: 30px;
}
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
you can try this one:
HTML
<table>
<tr>
<td>
<table>
<tr>
<td colspan="2">Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
<tr>
<td>Th</td>
<td>Th</td>
</tr>
</table>
</td>
<td>Th</td>
</tr>
</table>
CSS
table
{
width:100%;
height:100px;
text-align:center;
border:2px solid gray;
border-collapse: collapse;
}
td
{
border:2px solid gray;
}
.container
{
width:100%;
}
.container .header
{
width:100%;
height:200px;
background:#5076BB;
}
.container .slider
{
width:100%;
height:500px;
background:#5076BB;
}
DEMO HERE
UPDATED DEMO HERE
Read the tutorial: http://www.w3schools.com/html/html_tables.asp
In particular read the part about the attributes rowspan="" and colspan=""
Example:
<td colspan="2">This table data will span two columns</td>
<td rowspan="2">This table data will span two rows</td>
I'm encountering a problem when styling an dynamic generated table. The user can choose how many columns there have to be, some of them have got a fixed length. How can I let the other give a percentage of the space left, without having to specify the exact width of the columns every time AND without ending up with different column widths with different data/different browsers?
Example:
<style type="text/css">
table{
width:800px;
border:1px solid #CCCCCC;
/* table-layout: fixed; */
}
table td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
border:1px solid #EEEEEE;
}
table tbody td.active{
text-align:center;
width:100px; /* fixed */
}
table tbody td.option{
width:100px; /* fixed */
}
table tbody td.nonfixed{
width:auto;
}
</style>
<table>
<thead>
<tr>
<td>Name</td>
<td>Description</td>
<td>Active</td>
<td colspan="2">Options</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">+ Add new row<td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="nonfixed">[Name 1]</td>
<td class="nonfixed">[Description 1]</td>
<td class="active">[X]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
<tr>
<td class="nonfixed">[Name 2]</td>
<td class="nonfixed">[Description 2]</td>
<td class="active">[0]</td>
<td class="option">Edit</td>
<td class="option">Delete</td>
</tr>
</tbody>
</table>
In the example both "nonfixed" columns should have the exact same width. This should also work when the user adds a nonfixed column or switches the first column with the last etc.
Who's able to help me out?
I see two possible approaches... either use a script to calculate the flexible-width columns' widths and average them, or use nested tables to split the two flex cols at 50%:
<table>
<tr>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="fixed"></td>
<td class="flex-wrapper">
<table width="100%">
<tr>
<td width="50%"></td>
<td width="50%"></td>
</tr>
</table>
</td>
</tr>
</table>
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>