Pretty basic question about styling tables - html

I'm really bad with html/css, so I'm just wondering if I can get your help.
Here's a fiddle of this table fiddle. You can see that each of the td rows are the same width. However, I want, for example, to have the column on the left 200 px, and the column on the right 50 px.
What's the most efficient way to achieve that if I'm going to have a lot of rows?
<table id="theList">
<thead>
<tr>
<th >Item</th>
<th >Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
</tbody>
</table>
CSS
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}

Keep in mind that you don't need to set the style on every <td>, just on the <th>. All of the above answers would work, but I would prefer to set a class on the <th> and apply the width styles that way.
<table id="theList">
<thead>
<tr>
<th class='header-250' >Item</th>
<th class='header-50' >Price</th>
</tr>
....
</table>
And CSS:
.header-250 {
width: 250px;
color: red; //example
}
.header-50 {
width: 50px;
}
Just my style. I'm not a fan of inline styles, just for the simple fact you MAY want to style the headers differently. If you don't need that, inline would work fine.

You can do this by writing an inline style into your HTML markup.
<table id="theList">
<thead>
<tr>
<th style="width: 200px;">Item</th>
<th style="width: 50px;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 200px;">Milk</td>
<td style="width: 50px;">1.99</td>
...

You can use the COL element.
<table id="theList">
<col class="column1" style="width: 200px;">
<col class="column2" style="width: 50px;">
.
.
.
</table>
Demo 1 uses inline styles
Demo 2 uses css
Personally, I'd specify width on all columns of first row using inline styles (all but one column if table itself has a width).

Related

Table header and table cell display different width

I need to separate table and into headers and rows to be able to control scrolling. But now column width for headers and cells appear to be different. I'm trying to eliminate all padding and border on span element. In this example column header appears as 131px. In my other case, cell width comes as 129px (less than defined width 130px) and I'm not able to figure it out.
<table style="border-collapse: collapse;">
<thead>
<tr>
<th style="width: 130px; padding:0px; border:1px solid;">Column1</th>
</tr>
</thead>
</table>
<table formArrayName="scheduleDetail" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 130px; padding:0px; border:1px solid; box-sizing: border-box;">
<span style="width: 130px; padding:0px; border:0px;">
1111
</span>
</td>
</tr>
</tbody>
</table>
Seems like width on span is not applicable unless used with display: inline-block. That resolved.

HTML Table - vertical line on change of a <th> tag

Is it possible to have a vertical line running down the whole length of a table on the change of a <th> tag. For example in the table below
How can I add a vertical line running from top to bottom between each month using CSS?
Depends on what HTML you've got for your table, but here is an example. Use this code to add a vertical border.
table { border-collapse: collapse; }
tr { border: none; }
.line {
border-left: solid 1px #000;
}
<table>
<tr>
<th colspan="2" class="line">Persons</th>
</tr>
<tr>
<th class="line">Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td class="line">James</td>
<td>Bond</td>
</tr>
<tr>
<td class="line">Clark</td>
<td>Kent</td>
</tr>
</table>

Removing border from table cells

I know this is a dumb question but I seem to have totally forgotten how to do it.
I have a HTML table and I want to remove all borders around all the cells so that there is only one border around the entire table.
My code looks like:
<table border='1' width='500'>
<tr><th><h1>Your Wheelbarrow</h1></th><tr>
<th>Product</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Delete</th>
</tr>
Just collapse the table borders and remove the borders from table cells (td elements).
table {
border: 1px solid #CCC;
border-collapse: collapse;
}
td {
border: none;
}
Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.
The HTML attribute for the purpose is rules=none (to be inserted into the table tag).
Probably you just needed this CSS rule:
table {
border-spacing: 0px;
}
http://jsfiddle.net/Bz3Jt/3/
<style type="text/css">
table {
border:1px solid black;
}
</style>
You might want to try this: http://jsfiddle.net/QPKVX/
Not really sure what you want your final layout to look like- but that fixes the colspan problem too.
Just use your table inside a div with a class (.table1 for example) and don't set any border for this table in CSS. Then use CSS code for that class.
.table1 {border=1px solid black;}
Change your table declaration to:
<table style="border: 1px dashed; width: 500px;">
Here is the sample in action: http://jsfiddle.net/kc48k/
If none of the solutions on this page work and you are having the below issue:
You can simply use this snippet of CSS:
td {
padding: 0;
}
As #brezanac mentioned, you can add the border-collapse, no need for anything else. I attach and example
.table {
border: 1px solid #CCC; // only for example
border-collapse: collapse;
}
th, td {
border: 1px solid #CCC; // only for example
}
<table aria-describedby="table without borders"
class="table">
<tr>
<th id="id">id</th>
<th id="name">name</th>
<th id="price">price</th>
</tr>
<tr>
<td>1</td>
<td>Pizza</td>
<td>7.99</td>
</tr>
<tr>
<td>2</td>
<td>Burger</td>
<td>3.99</td>
</tr>
</table>
<br/>
<table aria-describedby="table with borders">
<tr>
<th id="id">id</th>
<th id="name">name</th>
<th id="price">price</th>
</tr>
<tr>
<td>1</td>
<td>Pizza</td>
<td>7.99</td>
</tr>
<tr>
<td>2</td>
<td>Burger</td>
<td>3.99</td>
</tr>
</table>

Get header/caption centered above 2-column table

I've temporarily inherited the responsibility to look after the website front end to our project as our web maintainer has just left and there isn't a replacement yet (and I'm a summer student anyway, so I'm off soon too...). I'm not very experienced with HTML/CSS/etc, and I'm having some problems getting a table formatted the way the bosses would like it. The table HTML/CSS (cut down as much as I think I can) is as follows:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
The text in the table (that is, the header cells text and the standard cells text) is generated server-side based on a database, so the values in them can be quite long or quite short (with a reasonable maximum length). The bosses want it as follows:
The two columns must be justified against each other in the middle, with a small space inbetween.
The table should expand so that all the text in each cell is on the same row.
The title ("Details") should always be centered between the two columns, no matter what the ratio of widths are (as they will normally be about 60:40).
I think I've managed to capture 1 and 2 okay - this table should expand if you add longer th/td s, and it should likewise get smaller if you remove them - but I'm struggling with number 3. I'm just not sure how to do it at all. I've tried using a <caption>, but that didnt help - it's still centered above the entire table, not centered above the column split.
So, I'd appreciate any help getting the table to look 'right'. The only expected browser is apparently Firefox, versions 2 through 3.5 (although pushing 3.5 over 2 mostly). I apologise if I've missed any important information - please just ask and I'll add it.
EDIT:
Screenshot (red lines just for marking centre, not actually on table IRL):
The Solution
Its a bit tricky, but you could do this:
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="details">
<table class="center">
<tr><td> </td><td><div style="width: 1px;overflow:visible;text-align: center;margin: -40px;"><h5>Details</h5></div></td><td> </td></tr>
<tr>
<th class="details-column-left">Title</th>
<td width="1"> </td>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td> </td>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td> </td>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td> </td>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td> </td>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td> </td>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
it's, not really clean and tidy, but it should work out just fine
greetz

Setting table column width

I've got a simple table that is used for an inbox as follows:
<table border="1">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
How do I set the width so the From and Date are 15% of the page width and the Subject is 70%. I also want the table to take up the whole page width.
<table style="width: 100%">
<colgroup>
<col span="1" style="width: 15%;">
<col span="1" style="width: 70%;">
<col span="1" style="width: 15%;">
</colgroup>
<!-- Put <thead>, <tbody>, and <tr>'s here! -->
<tbody>
<tr>
<td style="background-color: #777">15%</td>
<td style="background-color: #aaa">70%</td>
<td style="background-color: #777">15%</td>
</tr>
</tbody>
</table>
table {
width: 100%;
border: 1px solid #000;
}
th.from, th.date {
width: 15%
}
th.subject {
width: 70%; /* Not necessary, since only 70% width remains */
}
<table>
<thead>
<tr>
<th class="from">From</th>
<th class="subject">Subject</th>
<th class="date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>[from]</td>
<td>[subject]</td>
<td>[date]</td>
</tr>
</tbody>
</table>
The best practice is to keep your HTML and CSS separate for less code duplication, and for separation of concerns (HTML for structure and semantics, and CSS for presentation).
Note that, for this to work in older versions of Internet Explorer, you may have to give your table a specific width (e.g., 900px). That browser has some problems rendering an element with percentage dimensions if its wrapper doesn't have exact dimensions.
Use the CSS below, the first declaration will ensure your table sticks to the widths you provide (you'll need to add the classes in your HTML):
table{
table-layout:fixed;
}
th.from, th.date {
width: 15%;
}
th.subject{
width: 70%;
}
Alternative way with just one class while keeping your styles in a CSS file, which even works in IE7:
<table class="mytable">
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
<style>
.mytable td, .mytable th { width:15%; }
.mytable td + td, .mytable th + th { width:70%; }
.mytable td + td + td, .mytable th + th + th { width:15%; }
</style>
More recently, you can also use the nth-child() selector from CSS3 (IE9+), where you'd just put the nr. of the respective column into the parenthesis instead of stringing them together with the adjacent selector. Like this, for example:
<style>
.mytable tr > *:nth-child(1) { width:15%; }
.mytable tr > *:nth-child(2) { width:70%; }
.mytable tr > *:nth-child(3) { width:15%; }
</style>
These are my two suggestions.
Using classes. There is no need to specify width of the two other columns as they will be set to 15% each automatically by the browser.
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
Without using classes. Three different methods but the result is identical.
a)
table { table-layout: fixed; }
th+th { width: 70%; }
th+th+th { width: 15%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
b)
table { table-layout: fixed; }
th:nth-of-type(2) { width: 70%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
c) This one is my favourite. Same as b) but with better browser support.
table { table-layout: fixed; }
th:first-child+th { width: 70%; }
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
</table>
Add colgroup after your table tag. Define width and number of columns here, and add the tbody tag. Put your tr inside of tbody.
<table>
<colgroup>
<col span="1" style="width: 30%;">
<col span="1" style="width: 70%;">
</colgroup>
<tbody>
<tr>
<td>First column</td>
<td>Second column</td>
</tr>
</tbody>
</table>
Depending on your body (or the div which is wrapping your table) 'settings' you should be able to do this:
body {
width: 98%;
}
table {
width: 100%;
}
th {
border: 1px solid black;
}
th.From, th.Date {
width: 15%;
}
th.Date {
width: 70%;
}
<table>
<thead>
<tr>
<th class="From">From</th>
<th class="Subject">Subject</th>
<th class="Date">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
<td>Your question</td>
<td>5/30/2009 2:41:40 AM UTC</td>
</tr>
</tbody>
</table>
Demo
Try this instead.
<table style="width: 100%">
<tr>
<th style="width: 20%">
column 1
</th>
<th style="width: 40%">
column 2
</th>
<th style="width: 40%">
column 3
</th>
</tr>
<tr>
<td style="width: 20%">
value 1
</td>
<td style="width: 40%">
value 2
</td>
<td style="width: 40%">
value 3
</td>
</tr>
</table>
table { table-layout: fixed; }
.subject { width: 70%; }
<table>
<tr>
<th>From</th>
<th class="subject">Subject</th>
<th>Date</th>
</tr>
</table>
Here's another minimal way to do it in CSS that works even in older browsers that do not support :nth-child and the like selectors: http://jsfiddle.net/3wZWt/.
HTML:
<table>
<tr>
<th>From</th>
<th>Subject</th>
<th>Date</th>
</tr>
<tr>
<td>Dmitriy</td>
<td>Learning CSS</td>
<td>7/5/2014</td>
</tr>
</table>
CSS:
table {
border-collapse: collapse;
width: 100%;
}
tr > * {
border: 1px solid #000;
}
tr > th + th {
width: 70%;
}
tr > th + th + th {
width: 15%;
}
<table>
<col width="130">
<col width="80">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Demo
Don't use the border attribute, use CSS for all your styling needs.
<table style="border:1px; width:100%;">
<tr>
<th style="width:15%;">From</th>
<th style="width:70%;">Subject</th>
<th style="width:15%;">Date</th>
</tr>
... rest of the table code...
</table>
But embedding CSS like that is poor practice - one should use CSS classes instead, and put the CSS rules in an external CSS file.
style="column-width:300px;white-space: normal;"