I have a simple HTML Table:
table,
th,
td {
border: 1px solid black;
}
<h1>The table width attribute</h1>
<table width="400">
<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>
when i enter into lots of data (for example: instead of 100$ i enter 1000000000000000$) it keeps spreading. i tried to limit it's width to like 10px and overflow-y auto and didnt work...
any idea how i can limit the amout of chars inside and auto enter?
Thanks in advance.
You can use something like this.
The width you gave to your table was 400 so if you can do that then you should limit it.
there is CSS property called overflow-wrap this will help you to bring the extra content in that block.
td {
max-width:20px;
overflow-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The table width attribute</h1>
<table width="400">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$8000000000000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
</body>
</html>
OR
Another option is to give a selector class to td and provide css property to only that class, that should also work for you.
You can use text-overflow: ellipsis; or refer to w3schools
Related
I have a table and I want to style spacing for every row in the table. I want the gap after the first row to be small (for example 1px) and 20px after the second row. Margin and padding does not seem to work. I also tried cellspacing = 20 but it sets spacing for every cell and I want to style gaps after the rows. How can I achieve that?
This snippet is what I currently have and what I tried :)
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellspacing="20">
<tr style = "margin-bottom: 1px; padding-bottom: 1px">
<th style = "padding-bottom: 1px">Month</th>
<th style = "padding-bottom: 1px">Savings</th>
</tr>
<tr>
<td style = "margin-bottom: 20px">January</td>
<td style = "margin-bottom: 20px">$100</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 1px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
padding is not allowed on table row so you can apply padding to td or you can also add div inside td and give div tag margin bottom.
here, I have taken table inside td and gave margin to table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2" style="border:0px;">
<table style="margin-bottom:10px;border:0px;">
<tr>
<td>Month</td>
<td>Savings</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="border:0px;">
<table style="width:100%;margin-bottom:10px;border:0px;">
<tr>
<td >January</td>
<td>$100</td>
</tr>
</table>
</td>
</tr>
<tr style = "border-collapse: separate; border-spacing: 20px">
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
I want the gap after the first row to be small (for example 1px) and
20px after the second row.
You can achieve it by using padding on the td, and with pseudo selectors.
Something like this:
table tr td {padding-top: 20px;}
table tr:nth-of-type(2) td {padding-top: 1px;}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$20</td>
</tr>
<tr>
<td>June</td>
<td>$50</td>
</tr>
</table>
Maybe I am being too picky. I want to put cell padding in some tables but not others, without editing every single td element. I would like to make it html5 compliant, which means not using the cellpadding property of the table. But I would like something equivalent to cellpadding - ie something I can apply to the properties of a whole table, on a table by table basis.
To make it even more complicated, I want collapsed borders, which I think rules out using the cell spacing property. Is there something tricky I can do there?
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>
<body>
<p>Table without cellpadding:</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with cellpadding:</p>
<table cellpadding="10">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<p>Table with css:</p>
<table class="cell-pad">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</body>
</html>
You can solve these problems using CSS.
table.table-big td {
padding: 10px;
}
table.table-collapse {
border-collapse: collapse;
}
table td {
border: 1px solid #333;
}
<table class="table-big table-collapse">
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
padding on the cell level can be used to create spacing between data and border.
border-collapse on the table can be used to collapse or separate borders.
You can create classes with these styles so you keep direct control on which table gets which styling. In my example the second table did not get any styling.
How to push the second row's td to the right? I know I can simply add one more empty td but I want to produce cleaner markup. Is there any css attribute to avoid that?
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
You can do that with a pseudo element, like this, CSS only, no change in the markup
What happens here is that when the pseudo renders it will render as an anonymous table cell, hence push the existing one to the right in the same way the <td></td> markup would.
table, th, td {
border: 1px solid black;
}
table tr:nth-child(3):before {
content: '';
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>$100</td>
</tr>
</table>
The best way would be to produce the extra <td></td> before the $100 cell. If you insist on not using the extra <td></td>, try <td colspan="2" style="text-align:right;">$100</td>
I am trying to create a html table and encounter an issue here.
I was hoping to specify one particular row to have no padding with CSS.
html
<table cellpadding="10" cellspacing="5">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
</table>
css
table, th, td {
border:solid 1px red;
}
table {
border-collapse: inherit;
border-spacing: 5px;
}
http://jsfiddle.net/3rL9dryp/1/
In jsFiddle, all rows in table has padding to upper rows. I want to keep the padding for each row but need to remove top padding to upper row for a single row (for example, third row). Is this doable?
Thanks a lot!
Here's an example of the code working. I added padding-top:100px to emphasize the difference.
http://jsfiddle.net/m704mxz6/1/
Change it to padding-top:0px; to achieve your goal.
You can use the CSS3 pseudo-selector :nth-child:
table tr:nth-child(3) td {
padding-top: 0;
}
I have a html table with CSS. Currently all the cells have a white border around them, I am having trouble removing the column borders for each cell so the rows are divided by a white line. A similar table to what I'm trying to achive can be seen at http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/, look at example 3 (the top table in this example). So far my code looks like:
<html>
<head>
<style type="text/css">
table, td, th
{
font-family:calibri;
border:collapse:collapse;
}
th
{
background-color:#b9c9fe;
color:#006add;
}
td
{
background-color:#e8edff;
color:#666699;
}
</style>
<body>
<table cellpadding="5" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Looks like there's a slight error in the table style: it says border:collapse:collapse where it should be border-collapse: collapse;.
From there, you'll just need to add border-bottom: 1px solid #fff; to the table, th, td block, and you should be all set!