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
Related
I have a table with rows/columns inverted, as in HTML Table with vertical rows . I would like to divide some of the table cells in two.
HTML
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td>row 1 cell 2</td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td><table><tr><td>row 2,</td><td> cell 2</td></tr></table></td>
<td><table><tr><td>row 2,</td><td> cell 3</td></tr></table> </td>
</tr>
</tbody>
</table>
CSS
table.test1 >tbody > tr { display: block; float: left; }
table.test1 >tbody > tr > td { display: block; }
Note that I need to put tbody tag because some browsers add it automatically which could mess up my css instruction on direct children.
This works fine for 2x2 table, but the alignment of the cells get messed up already for 2x3 table (and I need to do this for larger table). Is there any way to do this with CSS only? (I would rather avoid java script). Thank you in advance.
Besides the fact that in most cases div container would make more sense you could use colspan for your table. This was introduced with HTML 4.01 was exactly designed for cases like this.
<table border="1" class="test1">
<tbody>
<tr>
<td>row 1, cell 1</td>
<td colspan="2">row 1 cell 2</td>
<td colspan="2"> row 1 cell 3 </td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2,</td>
<td> cell 2</td>
<td>row 2,</td>
<td> cell 3</td>
</tr>
</tbody>
</table>
This question already has answers here:
display table height not always respected
(3 answers)
Closed 5 years ago.
I created an html table and I am trying to set a max-height and height properties to itbut the table don't accept themI am using this code
HTML
<table class="table table-striped table-hover" id="Table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 0 0</td>
<td>Row 0 1</td>
<td>Row 0 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 0 3</a></td>
</tr>
<tr>
<td>Row 1 0</td>
<td>Row 1 1</td>
<td>Row 1 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 1 3</a></td>
</tr>
<tr>
<td>Row 2 0</td>
<td>Row 2 1</td>
<td>Row 2 2</td>
<td><a id="table-buttons" class="btn btn-primary">Row 2 3</a></td>
</tr>
</tbody>
</table>
CSS
#Table {
width: 600px;
max-width: 600px;
height: 210px;
max-height: 210px;
overflow-y: auto;
}
td {
width: 150px;
max-width: 150px;
}
the table:
The specified height and max-heightmustn't allow the table to carry more than these three rows and the headerbut when I add another row the table
totally ignores the height and the max-heightand expands to fit the four rows
I want the table to show a scrollbar as a result of the overflow-y: auto propertybut the didn't happen
I am using This Bootstrap style
please help
Setting table height is overruled by the table content. See this answer: display table height not always respected
You could work around it by wrapping a div around it (and setting the height and overflow on the div).
Put the table in a div, and set the height and width for that div:
<div id="Table">
<table class="table table-striped table-hover">
<!-- Table rows and data -->
</table>
</div>
Note: remove the id from the table tag.
Just wrap a div around the table, checkout this Codepen for a demo
You should target the class, not the ID.
Like this:
.table {
width: 600px;
max-width: 600px;
height: 210px;
max-height: 210px;
overflow-y: auto;
}
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.
I see there are a couple of posts about this around, including one on SO. However none of them answer the question, I am posting a newer one with an image that demonstrates the problem in 4 browsers.
FireFox renders the background image on the TR as I would like but as you can see none of the others do..
Does anybody have any ideas? At this point it looks like I need to go back to the drawing borad.
ps. adding backgound:none or background-image:none to TD doesn't fix this.
This is the code for my test case:
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body
{
background-color:#aaa;
}
table
{
background-color:#fff;
}
tbody tr
{
height:80px;
background:#aaa url("Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat bottom ;
position:relative;
}
tbody tr td
{
background-image:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th style="width:200">Col1</th>
<th style="width:200">Col2</th>
<th style="width:200">Col3</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 colspan="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 colspan="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 colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Would nested table work for you?
see the 3rd row
Works cross-browser. Not cute (nested table!), but gets the job done.
Styling <tr>is hum, problematic, especially cross-browser. After all, a tr can only contains td. It's not made to support other stuff (try <table><tr><td>1</td></tr><div>2</div></table> for fun).
Also, give Opera some love.
edit:however, you'll have to either have the same (fixed) width for the nested <td> (or the content), otherwise, the width of the <td> will be broken (not the same).
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 */ }