**** UPDATED ****
I found out if I just leave off the last width then it auto fills to the end of the table... why? No idea, but I guess its just how it works?
Here is my fiddle:
JSFIDDLE
<div>
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>Yes</td>
<td>No</td>
<td>Maybe</td>
</tr>
</tbody>
</table>
</div>
CSS
div {
width: 300px;
outline: 3px solid red;
}
tr {
border: 1px solid gray;
}
th, td { outline: 1px solid red;}
table {
border: 1px solid gray;
width: 100%;
border-collapse: collapse;
table-layout: fixed;
box-sizing: border-box;
}
th, td {
padding: 5px;
}
col:first-child { width: 35px; }
col:nth-child(2) { width: 35%; }
col:last-child { width: calc(65% - 35px); }
There is a difference in safari vs chrome. I think in Safari it doesn't calculate the last one because I even changed it to 25% - 35 and it still filled the width. More than anything I just want to see where the differences are documented. Or if someone wants to explain how they treat them so I don't make this mistake again (btw, the original code works great in chrome... but noticed today in safari the last column was completely collapsed which is what got me investigating)
Related
I am trying to achieve this table look
How can I make the first heading to fill the entire width? Something like flex: 1 would do. Also, how can I add border to only elements in the table like on the picture, instead of entire table?
.center {
text-align: center;
}
table {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
I need this to look like
Image
You can do like below:
.center {
text-align: center;
}
td,
th {
padding: 3px 5px; /* control the spacing */
}
table {
border-collapse: collapse; /* this is mandatory to correctly use border */
border-bottom: 1px solid black; /* only border bottom here */
}
th:first-child {
width: 100%; /* take as much space as possible */
}
tr:nth-child(2) {
border-top: 1px solid black; /* border top to second tr */
}
tr:not(:first-child) {
/* right and left to all except the first one */
border-left: 1px solid black;
border-right: 1px solid black;
}
<table style="width:100%">
<tr>
<th style="text-align:left">Month</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
<th style="text-align:center">Savings</th>
</tr>
<tr>
<td>January</td>
<td class="center">$100</td>
</tr>
<tr>
<td>February</td>
<td class="center">$80</td>
</tr>
</table>
For styling the first raw(table header) there are many solutions fastest one by selecting table first raw
table tr:first-child{
border: 1px solid black;
}
I recommend you to read this article first: A Complete Guide to the Table Element
I'm trying to highlight a table row by changing the border color of that individual row. This is my CSS:
table { border-collapse: collapse;}
td { min-width: 100px; border: 1px solid green; }
.highlight td { border: 1px solid orange; }
...and this is my HTML:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
The result is this:
The top border remains green. The only way I could get it work was by changing border-bottom color of the TD elements 1 and 2. Is there a more elegant solution? Using the outline property didn't do the trick. Thanks!
Only by removing border-collapse: collapse; because it merges borders that are adjacent.
Then apply a 0 value for border-spacing
Border-spacing : MDN
The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.
table {
/*border-collapse: collapse;*/
border-spacing:0;
font-size:32px;
}
td {
min-width: 100px;
border: 3px solid green;
}
.highlight td {
border-color: orange;
}
/* optional enhancment to narrow vertical joined borders*/
td + td {
border-left:0;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
try that
table { border-collapse: collapse;}
td { min-width: 100px;}
td:first-child{border-right: 1px solid green;}
tr{border: 1px solid green;}
tr.highlight td { border: 1px solid orange; border-top: 1px solid orange; }
you should give the border to the rows and the td that are first child, then apply different color for the border of the highlited tr.
In order to fix this give your tr a display property of block. See the code snippet below.
table {
width: 100%;
border-collapse: collapse;
}
tr {
width: 100%;
display: block;
}
td {
min-width: 100px;
text-align: center;
border: 1px solid green;
/*
Remove the left border from td
to make the border width even
on all sides.
*/
border-left: none;
}
td:first-child {
/*
If the td is the first child
give it a left border to close
the left side of the row.
*/
border-left: 1px solid green;
}
.highlight td {
/*
Since you're changing only the
border-color, you only need to
redefine the border-color.
*/
border-color: orange;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr class="highlight">
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
Alternatively, if you set the width of tr to 100%, which I have in the script, you can use inline-block or inline-flex for your display property.
/*
In the case of the tr with a width of 100%
all of the following have the same output
for their borders.
*/
display: inline-block;
display: inline-flex;
display: block;
*Note, this question has basically been overhauled from a previous version so as to be more precise. Thus some of the answers below do not completely the restructed question.
I have two sets of data which I need to display tabulated. As both sets of data need to have the column widths (but still be dynamic), I am using two <tbody>'s.
I am trying to set a heading for each of the tabulated data, in a way that the heading takes up the width of the entire <tbody>.
I have tried using table-caption, but it does not apply to the tbody, but the table itself. Meaning all captions look to go to the top of the table, regardless of where they are in the html.
To demonstrate what I am running into, see the following snippet:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
tbody:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100%;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<caption>Caption1</caption>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<caption>Caption2</caption>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
My current attempt is to use :before. But as you can see, the :before does not take up the entire width of the tbody. Even with width: 100% it does not work.
Another way I realized it could be done is to have another row for each tbody, and set colspan to equal the amount of columns for that table. Like this:
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
th,
td {
padding: 4px 0px;
border: 1px solid black;
}
caption {
border: 1px dotted black;
}
<table>
<tbody id="tbody1">
<tr>
<th colspan="2">Title1</th>
</tr>
<tr>
<th>bob</th>
<th>dob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th colspan="2">Title2</th>
</tr>
<tr>
<th>dob</th>
<th>bob</th>
</tr>
</tbody>
</table>
However, the only problem there is that it does not become dynamic and requires you to know how many columns there will be ahead of time. Normally this would not be a problem but I am looking for a more dynamic solution in my case.
My question is: How does one add a caption to a tbody (not the table) in a way so that each caption relates to the applicable tbody and not the table
You just need to set the width to 100vw. This sets the width to 100% of the viewport width. For a more in-depth explanation of viewport width, see this article.
table {
width: 100%;
border-collapse: collapse;
color: black;
margin-bottom: 2px;
}
#tbody1:before, #tbody2:before {
display: table-caption;
font-size: 1.25em;
padding: 16px;
background-color: #303030;
font-weight: bold;
color: white;
width: 100vw;
}
#tbody1:before {
content: 'tbody1';
}
#tbody2:before {
content: 'tbody2';
}
th, td {
padding: 4px 0px;
border: 1px solid black;
}
<table>
<tbody id="tbody1">
<tr>
<th>bob</th>
</tr>
</tbody>
<tbody id="tbody2">
<tr>
<th>dob</th>
</tr>
</tbody>
</table>
I have an issue. I have a table made with pure HTML code, here is it:
<table id="calendarTable">
<tr>
<th id="tableHeader" colspan=7></th>
</tr>
<tr>
<th>Dom</th>
<th>Seg</th>
<th>Ter</th>
<th>Qua</th>
<th>Qui</th>
<th>Sex</th>
<th>Sáb</th>
</tr>
<tbody id="tableBody"></tbody>
<tr>
<td colspan=7>
<p>
<form id="dateChooser" name="dateChooser">
<select name="chooseMonth" onChange="populateTable(this.form)">
<option selected>Janeiro
<option>Fevereiro
<option>Março
<option>Abril
<option>Maio
<option>Junho
<option>Julho
<option>Agosto
<option>Setembro
<option>Outubro
<option>Novembro
<option>Dezembro
</select>
<select name="chooseYear" onChange="populateTable(this.form)">
</select>
</form>
</p>
</td>
</tr>
</table>
Here is my CSS:
#calendarTable {
text-align: center;
width: 80%;
height: 100%;
color: #18B6E6;
border-color: #18B6E6;
border: solid 1px;
border-radius: 20px;
}
#calendarTable td {
border: solid 1px;
border-radius: 4px;
}
#calendarTable th {
border: solid 1px;
font-weight: 700;
}
I want to round the borders using only CSS, I just tried using the border-radius property but my table is not changing borders.
Anyone have a tip for me?
Thanks in advance!
Here's a simplified table with border radius applied. The trick is to set the left border of the cell rather than the table itself. It'll work with or without a thead and I've annotated the css to show what I'm doing.
/*
* First normalise some of the attributes
*/
table td,
table th {
padding: .5rem;
text-align: left;
vertical-align: top;
}
/*
* Add the border, set border spacing etc
* The left width is 0 so cell border can be applied without doubling up.
*/
.table-bordered {
border: 1px solid silver;
border-left-width: 0;
border-collapse: separate;
border-spacing: 0;
border-radius: 1rem;
}
/*
* Add the border to table cell/header
*/
.table-bordered td,
.table-bordered th {
border-top: 1px solid silver;
border-left: 1px solid silver;
}
/*
* Remove the top border from the first header/cell
*/
.table-bordered tbody:first-child tr:first-child td,
.table-bordered thead:first-child tr:first-child th {
border-top-width: 0;
}
/*
* Set the border radius for the first header/cell
*/
.table-bordered thead:first-child tr:first-child td:first-child,
.table-bordered thead:first-child tr:first-child th:first-child {
border-top-left-radius: 1rem;
}
/*
* Set the border radius for the last header/cell
*/
.table-bordered tbody:last-child tr:last-child td:first-child,
.table-bordered tbody:last-child tr:last-child th:first-child {
border-bottom-left-radius: 1rem;
}
<table class="table-bordered">
<thead>
<tr>
<th scope="col">Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th scope="row">Data</th>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
As others have said, this is the code that should give the look you want.
Code
#RoundedTable {
border: 1px solid black;
border-radius: 10px;
}
#RoundedTable td, #RoundedTable th {
border: 1px solid gray;
border-radius: 10px;
padding: 3px;
}
<table id="RoundedTable">
<tr><th>Table header</th><th>Another header cell</th></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
<tr><td>Table cell...</td><td>More data...</td></tr>
</table>
Caveat
For this to work, though, you need to make sure that border-collapse is set to separate instead of collapse for your table. Otherwise, neither the radius for the cells nor the radius for the whole table will work.
So look through the other CSS that may be affecting your table. If you find border-collapse: collapse; anywhere, that's the problem.
#calendarTable{
border-radius:20px;
}
DEMO
Remove the border attribute on the table. It is still supported in browsers, but it is removed from HTML5 specification. The effect that attribute makes is probably not what you want anyways.
If you want border around each cell in your table just specify that in CSS and include border-radius there as well.
I.e.
#calendarTable td { border: solid 1px; border-radius: 4px; }
If you just want border around the whole table, use the same css on table selector:
#calendarTable { border: solid 1px; border-radius: 4px; }
border-radius seems to work both on table and td elements, with or without the border attribute on table.
You must have some other CSS rules coming into play.
table {
border: 1px solid blue;
border-radius: 10px;
}
table td, table th {
border: 1px solid gray;
border-radius: 10px;
padding: 5px;
}
<table border=1>
<tr>
<th>Table header...</th>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
<tr>
<td>Table cell...</td>
</tr>
</table>
I'm a newbie regarding CSS and HTML, so apologies if this seems like a stupid question. But for the love of god, I can't seem to figure it out. I only get a horizontal scrollbar and not a vertical one.
In the code below I try to achieve that the last column, that contains the string 'aaaaaabbb...' becomes scrollable. So that when it's overfilled it starts a new line and shows a scrollbar. So I would like to see this for the last row:
Desired result:
aaaaaaaa
bbbbbbbc
cccccccc
HTML-code:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow:scroll;
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td</tr>
</table>
</body></html>
Thank you for your help.
Two things:
You have a missing ">" at the end of your closing </td>.
You only have one column in that <tr> - is that intentional? (if not you should have colspan=2 in that <td>
The solution you are looking for is word-wrap: break-word; This will allow the content to wrap.
I have modified your snippet:
<!DOCTYPE html><html>
<head></head>
<body><head><style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width:100px;
height:200px;
max-width:100px;
min-width:100px;
max-height:200px;
min-height:2000px;
overflow: auto; /* changed this */
word-wrap: break-word; /* added this */
}
</style></head><body>
<h2>Ticket details</h2>
<table>
<tr><th>Requester</th><td>^User^</td></tr>
<tr><th>Submitted by</th><td>®User®</td></tr>
<tr><th>Service</th><td>#GLOBAL END USER WORKPLACE#</td></tr>
<tr><th>CI</th><td>+N/A+</td></tr>
<tr><th>Source</th><td>#Event#</td></tr>
<tr><th>Category</th><td>&Request Fulfillment&</td></tr>
<tr><th>Impact</th><td>!None - No Degradation of Service!</td></tr>
<tr><th colspan="2" style="text-align:Center">Assignment</th></tr>
<tr><th>Group</th><td>]Team]</td></tr>
<tr><th>Staff</th><td>[User[</td></tr>
<tr><th colspan="2" style="text-align:Center">Description</th></tr>
<tr><td class="td_size" colspan=2>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</td></tr>
</table>
</body></html>
Like others have mentioned, in order to get the long-one-word text to wrap - you need to add: word-wrap: break-word; to the td
However, achieving a vertical scroll on a table cell is problematic because by definition table cells expand to fit all the content.
You could work around this by setting display:block on that table cell. (like this)
But it's probably better to wrap the text within a span tag so as not to mess with the display of table elements:
Like so:
FIDDLE
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #eee;
}
.td_size {
width: 100px;
height: 200px;
max-width: 100px;
min-width: 100px;
}
.td_size span {
overflow: auto;
display: block;
max-height: 200px;
word-wrap: break-word;
}
<h2>Ticket details</h2>
<table>
<tr>
<th>Requester</th>
<td>^User^</td>
</tr>
<tr>
<th>Submitted by</th>
<td>®User®</td>
</tr>
<tr>
<th>Service</th>
<td>#GLOBAL END USER WORKPLACE#</td>
</tr>
<tr>
<th>CI</th>
<td>+N/A+</td>
</tr>
<tr>
<th>Source</th>
<td>#Event#</td>
</tr>
<tr>
<th>Category</th>
<td>&Request Fulfillment&</td>
</tr>
<tr>
<th>Impact</th>
<td>!None - No Degradation of Service!</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Assignment</th>
</tr>
<tr>
<th>Group</th>
<td>]Team]</td>
</tr>
<tr>
<th>Staff</th>
<td>[User[</td>
</tr>
<tr>
<th colspan="2" style="text-align:Center">Description</th>
</tr>
<tr>
<td class="td_size"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbcccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccdddddddd</span>
</td>
</tr>
</table>
First, make that last column span over 2, ie colspan=2 but as for the css part you can use overflow-x and overflow-y to determine the scrolling parts
Try it
you may use word-wrap: break-word; or <br> tag where you want to break the word