Why is this sample table, the body does not have the specified width?
<html>
<head>
<style type="text/css">
table{
border-collapse:collapse;
}
table,th, td{
border: 4px, solid;
}
#article{
background-color: #FDF8AB;
border: 3px solid #85A110;
width: 760px;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body id="article">
<div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Date</th>
<th>Notes</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>John </td>
<td>Doe</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
<tr>
<td>Adam </td>
<td>Johnson</td>
<td>20-12-2013</td>
<td>AAAa</td>
</tr>
</table>
</div>
</body>
</html>
You are using
#article {
background-color: #FDF8AB; /* Other Styles */
}
So when you are not using any background color for your html element, the next parent level element is body and so you are confused, provide a background color to html element and you'll see the difference
Demo
My Suggestion:
You should not use fixed width for body tag, let it be width: 100%; which it is, by default, as it's a block level element, instead, wrap your table inside a container div, use fixed width and auto margins for this div which will give you the desired effect and also in a neat way
The Right Way
You should place everything within the body into a div or section container/wrapper.
You define a width on the wrapper.
You apply a style to the body of text-align center.
So that the div#container or section#content has a defined width and margin:0 auto;.
Also if you have a 3px border, your width with be width + border left + border right. So that's where the extra 6 pixels are coming from.
Related
I want to make my html table to take the full window width in a way that th elements content does not overlap + there are even spacing between column headings (see the picture).
The space must scale with window width up to 0 (all words are hugging each other). How to do it?
big screen example:
small screen example:
By default the spacing between th elements gets proportional to the width of the elements.
If I use table-layout: fixed the width of the columns will be equal, i.e. space between them unti-proportional to width.
P.S. I need to use border-spacing: 0 because I need to highlight full table rows and with positive border-spacing the table background will be visible inbetween cells.
P.P.S. the question is specifically about table layout. I know I can do anything with grid and flex box, but I'm trying to use right tags for right content, and in this case I have a table data, i.e. the solution should work with "display: table".
table {
width: 80%;
background: gray;
}
th {
text-align: left;
}
.auto {
background: #90EE90;
}
.fixed {
table-layout: fixed;
background: #ADD8E6;
}
<table class="auto">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
<table class="fixed">
<thead>
<tr>
<th>1</th>
<th>333</th>
<th>999999999</th>
<th>22</th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
</tbody>
</table>
A probably a bit hacky only css solution would be to insert empty th/td elements and give them a realive width of 100% / amount of filled columns. Here 4 columns -> gap-width: 25% (use calc() if odd amount)
table {
width: 80%;
border-spacing: 0
}
th {
text-align: left;
}
th,
td {
border: 1px solid teal;
}
.gap {
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<thead>
<tr>
<th>1</th>
<th class="gap"></th>
<th>333</th>
<th class="gap"></th>
<th>999999999</th>
<th class="gap"></th>
<th>22</th>
<th class="gap"></th>
</tr>
</thead>
<tbody>
<tr>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
<td>aa</td>
<td class="gap"></td>
</tr>
</tbody>
</table>
</body>
</html>
I have this code
<html>
<head>
</head>
<body>
<table border="1">
<thead>
<tr>
<th style="height:100px;background-color:red">
<div>numbers</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:green;">animals</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
</tr>
</tbody>
</table>
</html>
Also see this plunkr: https://plnkr.co/edit/0TKcvlauVMAxp69qFovy?p=preview
I want to get the div in the second cell to be the same height as the th element (so all green). I did some research and it seems like height:100% only works if the parent th element has an explicitly defined height. Is there a way to get what I want by only changing the css of the div in the second cell? (I can't change the style of the parent th element, and don't want to use javascript/jquery)
Unfortunately, there are no css solutions in your case.
Only absolute positioned child elements can inherit height from parent without setting height on parent.
You should use script or change your template to solve it.
upd:
How about this solution for you? (you can set 100% height on div:before)
<table border="1">
<thead>
<tr>
<th>
<div>numbers<br> test <br>test</div>
</th>
<th>
<div id="test">animals</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
</tr>
</tbody>
</table>
<style>
#test:before{
position: absolute;
height: 100%;
width:100%;
top:0;
left:0;
background: #f00;
content: '';
z-index: -1;
}
th{
position: relative;
}
</style>
if it is only about plain bg color, then a pseudo element can do the job
th {/* prepare th to hold a hudge pseudo element*/
overflow: hidden;
}
.fullbg {/* make pseudo's continer the positioning reference */
position: relative;
z-index: 1;/* set over the th , useful for the pseudo coming */
}
.fullbg:before {
content: '';
position: absolute;
height: 200px;/* make it big enough 1000px won't hurt here */
width: 200px;
background: inherit;/* inherit bg color you want */
z-index: -1;/* set under content */
top: -100px;/* slide aside top and left to fully cover th */
left: -50px;
}
<table border="1">
<thead>
<tr>
<th style="height:100px;background-color:red">
<div>numbers</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:green;" class="fullbg">animals</div>
</th>
<th style="background-color:orange">
<div style="display:inline-block;background-color:turquoise;" class="fullbg">family</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>5.0</td>
<td>cat</td>
<td>cat</td>
</tr>
<tr>
<td>7.0</td>
<td>dog</td>
<td>dog</td>
</tr>
</tbody>
</table>
I made a simple table with HTML and CSS, however, the items don't display evenly when you resize your browser.
Screenshot:
As you can see, there is a lot of empty space.
How can I made it so these three rows evenly display across the div box no matter how the user resizes the browser?
I made a jsfiddle:
https://jsfiddle.net/5nm9m9pL/ (looks fine until your stretch the browser)
Code:
HTML
<div class="bet-ids" id="bet-ids">
<table>
<tr>
<th>Username</th>
<th>ID</th>
<th>Profit</th>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>232</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>523</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>4352</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>5234</td>
<td>+0.32423</td>
</tr>
</table>
</div>
CSS:
.bet-ids {
height: auto;
padding: 20px;
width: 60%;
font-family: Helvetica Neue;
color: black;
background-color: white;
}
If by "lots of white space" you mean you want to center it, then you can just add margin: auto to both the table and the div, since your div has a fixed width of 60%
Otherwise if you mean that you want to stretch out the table, then obviously you can't have a width of 60%;
.bet-ids {
height: auto;
padding: 20px;
width: 60%;
margin:auto;
font-family: Helvetica Neue;
color: black;
background-color: white;
}
table {
margin: auto;
}
<div class="bet-ids" id="bet-ids">
<table>
<tr>
<th>Username</th>
<th>ID</th>
<th>Profit</th>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>232</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>523</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>4352</td>
<td>+0.32423</td>
</tr>
<tr>
<td>bitcoincryptopro</td>
<td>5234</td>
<td>+0.32423</td>
</tr>
</table>
</div>
Just add .bet-ids table {width: 100%;} to your CSS: Tables set their width by their content unless you tell them otherwise.
I can't understand why the table sizing is working the way it is. Here is my example HTML:
<!DOCTYPE html>
<html>
<head>
<title>Table sizing test</title>
</head>
<body>
<style>
.tab-strip {
overflow: hidden;
white-space: nowrap;
}
.tab-strip .tab-button {
display: inline-block;
}
.tab-strip .tab-button td {
background-color: yellow;
}
.tab-strip .tab-button td:first-child {
background-color: green !important;
width: 100px;
}
</style>
<div>
<table align="center" border="1">
<tr>
<td valign="top">
<div class="tab-strip">
<table class="tab-button">
<tr>
<td></td>
<td>TEST1</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST2</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST3</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST4</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST5</td>
</tr>
</table>
<table class="tab-button">
<tr>
<td></td>
<td>TEST6</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
I've put it in a jsFiddle here: http://jsfiddle.net/90674xsg/
When the window is made narrower, the table keeps shrinking (smaller than its content) until a certain point, and then stops (causing a horizontal scrollbar to appear in the result window). What determines this minimum width, though?
UPDATE:
It's been pointed out to me that the table width is determined by adding up the content-derived width of cells that actually contain content. So the "TESTx" cells' widths are counted, but the empty cell widths are ignored even though they have a fixed width of 100px. How can i make the minimum table width include their widths?
Tables are kind of weird, there's good reason that modern web development has steered away from them.
Adding the css min-width property seems to do the trick for me, but I only tested in chrome.
.tab-strip .tab-button td:first-child {
background-color: green !important;
width: 100px;
min-width: 100px;
}
See updated fiddle here. If that doesn't work, you can try forcing it to stay open with padding instead of width - or add an empty div to the td that has a width of 100px.
I have a table that is in a DIV with overflow: auto :
HTML:
<div id="table">
<table>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</div>
In total there are 6 TH tags and 6 TD tags
CSS:
div#table
{
overflow: auto;
padding: 15px;
}
div#table table
{
border-collapse: collapse;
}
The overflow ensures that there is a horizontal scroll bar on the DIV so that the full table can be viewed.
I also specified padding on the DIV in the hope that the scroll bar and table are not positioned on the edges of the DIV - however this bit isn't working.
So basically what I want is for there to be padding around the DIV and the overflown content should not be touching the right edge of the DIV. I hope this makes sense!
You need something like this? http://jsbin.com/iseda3
if yes you can use the following code:
html
<div id="table">
<div>
<table>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</div>
</div>
css
div#table {
background:#09F;
width:150px;
}
div#table div {
overflow: auto;
margin: 15px;
}
div#table table {
border-collapse: collapse;
}
It sounds like you need to wrap your table in one further <div> element that has the required padding within it. Your table would then fit within that element but would still be subject to the parent container's overflow.
<div id="table">
<div style="padding: 1em;">
<table>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
</div>
</div>
You might want to consider making a container div that has the padding, and then put the div with id table inside of that larger div.
div#tableHolder
{
padding: 15px;
}
div#table
{
overflow: auto;
}
div#table table
{
border-collapse: collapse;
}