I am using float in css to display multiple tables vertically next to one another however float puts them without any spacing in between. How can I insert some gaps betwen these tables?
table{
float: left;
border:none;
border-collapse: collapse;
}
you shall use the margin property
table
{
margin:0 10px;
}
For info, the 0 corresponds to the above and under margin, and the 10 for the left and right margin.
You could also write it like margin(0 10px 0 10px); which stands for up - right - bottom - left
here you can use the {display:inline} instead of float
or you can use the padding or margin between tables/elements
table{
display: inline;
border:none;
border-collapse: collapse;
margin:0px 0px 0px 10px
}
I guess you're looking for this: JSFiddle
HTML
<table border="1" class="table1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1" class="table2">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS
.table1 {
float: left;
margin-right: 15px;
background: red;
}
.table2 {
float: left;
background: blue;
}
NOTE: I made table1 with margin-right - this will separate from table2. If you have more them 2 tables, add margin-right in left tables, or margin-left in right tables.
Related
I believe the width: 1px; white-space: nowrap; trick worked before but it seems not anymore now? Ref. CSS table column autowidth (there the table was also in fixed layout but thats back in 2011)
Here is the HTML and CSS:
table {
table-layout: fixed;
width: 100%;
}
td,
th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: 1px;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2 even width</th>
<th>Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
I also have an example setup in the following jsfiddle:
http://jsfiddle.net/hCkch/21/
How do you make the last column auto width based on the content while the other columns respect table-layout: fixed?
Note: the three columns given above is just an example. So please no hardcoded answers to make each column width 100/3%. This is a general question and the answer should fit for n columns with even width but the last one auto width based on the content.
With table-layout, you will want to set the widths of the cells in the first row of the table (https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout). You'll also want to add a width of 100% for the final column that is meant to auto-expand. Here is an edit of your jsfiddle:
http://jsfiddle.net/jessbodie/hCkch/31/
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th class="col1st">Column 1 even width</th>
<th class="col2nd">Column 2 even width</th>
<th class="col3rd">Column 3 even width</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td class="auto">Data4</td>
</tr>
</tbody>
</table>
table {
table-layout: fixed;
width: 100%;
}
td, th {
border: 1px solid red;
padding: 15px;
}
.col1st {
width: 100px;
}
.col2nd {
width: 100px;
}
.col3rd {
width: 100px;
}
.auto {
width: 100%;
white-space: nowrap;
}
For making the first n columns the same width, in SASS you can use the calc function to come up with the widths.
As mentioned in the comments, the only way I know to do this that should work cross browser is to get rid of table-layout: fixed; and set the width of the remaining columns. Fixed layouts are good for lots of things but automatically calculating based on content doesn't seem to be one of them.
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
width: 33.33%
}
.auto {
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
I realize you clarified that you don't want markup specific rules, but it does in fact accomplish your goal with the one requirement that you know how many columns you will be dealing with beforehand. In general, this should not be prohibitive.
Another possibly work around is to assign the widths client side using js after the fact:
$(document).ready(function() {
var width = 100 / $('table tr:first th:not(.auto)').length;
var cols = $('table th:not(.auto)');
cols.css('width', width + '%');
});
table {
width: 100%;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
And finally, I'll mention there is a Firefox specific implementation of min-content that actually does exactly what you want. Unfortunately, it only works on Firefox:
table {
width: 100%;
table-layout: fixed;
}
td, th {
border: 1px solid #D5D5D5;
padding: 15px;
}
.auto {
width: -moz-min-content;
white-space: nowrap;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Column 1 even width</th>
<th>Column 2</th>
<th>Column 3</th>
<th class="auto">Auto</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data4</td>
</tr>
</tbody>
</table>
Is it possible at all?
I have table that fills its container. (width 100%)
Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
#media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
You could use CSS and a media query to hide the middle column when the screen reduced to a specified width.
For example:
#media all and (max-width:500px) {
.second {
display: none;
}
}
In this example, the second column would not be displayed when the screen was reduced to a width of less than 500px
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Apply style in a table to specific columns within the th and td
I have a table and I need to be able to assign different styles to different columns, I need: -
The first two columns in the table header (header1 and header 2 to be given text-align:left; then all the remaining headers within the table header to be given text-align:center;
Similar thing with the table rows, the first two for all rows in the table to be given text-align:left; then the rest of the tds given text-align:center;
So basically the first two columns throughout the table will be left, then remaining be centered??
`
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
</tr>
Assuming your table has a class mytable:
.mytable td, .mytable th {
text-align: center;
}
.mytable td:first-child, .mytable td:nth-child(2) {
text-align: left;
}
.mytable th:first-child, .mytable th:nth-child(2) {
text-align: left;
}
This can be written more compactly as:
.mytable td, .mytable th {
text-align: center;
}
.mytable td:nth-child(-n+2) {
text-align: left;
}
.mytable th:nth-child(-n+2) {
text-align: left;
}
I have a table and I want to be able to assign specific styles within CSS to certain columns in the table: -
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
</tr>
</table>
I want to be able to give the first 2 th only the style of text-align:left; and the remaining th = text-align:center;.
The standard and direct solution :
th {
text-align:center;
}
tr th:nth-child(1), tr th:nth-child(2) {
text-align:left;
}
The advantage of this notation is that it's easy to change it to apply for example to the fourth and sixth th instead of the first two.
Note that this supposes the availability of CSS3 in the browser.
If you want to be compatible with IE8, you might do it easily in javascript :
var ths = document.getElementsByTagName('th'); // replace document by your table if necessary
for (var i=2; i<ths.length; i++) ths[i].style.textAlign="center";
or with jQuery :
$('th').each(function(){
if ($(this).index()>=2) $(this).css('text-align', 'center');
});
CSS3 way
th {
text-align:center;
}
th:nth-child(0), th:nth-child(1) { text-align:left; }
CSS2 Way
th{
text-align:center;
}
th:first-child, th:first-child + th{
text-align:left;
}
Do this
th:first-child, th:first-child + th{
text-align:left;
}
th + th + th{
text-align:center;
}
live demo http://tinkerbin.com/B5Zi88Pp
how can i increase the space in this table "Row 1, cell 1"?
<html>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
</html>
pls check here for the image:
http://img227.imageshack.us/img227/6166/htmln.png
is this correct:
<table border="1" td.my-cell { padding:100px; }>
<tr>
<td class="my-cell">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can either use cellpadding or using css
.cellpadding {
padding-left: 5px;
padding-right: 5px;
}
<td class="cellpadding">Row 1, cell 1</td>
EDIT Your edited post is wrong....do this:
<table border="1">
<tr>
<td style="padding-left: 5px; padding-right: 5px;">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can add a class to that specific cell and then use that class-name to apply css:
.larger {
height: 2em;
width: 4em;
padding: 2em;
}
<!-- rest of table -->
<td class="larger">Row 1, cell 1</td>
<!-- rest of table -->
Or you could use specific style-rules to apply a particular style:
tr td:first-child /* selects the first td within a tr */
Though this would apply to the first td of every row.
elaborate on "space"? you can add padding to the td if thats what you mean by "space"
table td { padding:5px; }
if you just want that cell bigger, add a calss
table td.my-cell { padding:5px; }
<td class="my-cell">Row 1, cell 1</td>
or do you mean
<td>Row 1, cell1</td>
you can increase the space between words like this:
table td { word-spacing: 20px; /* adjust */ }