How do I achieve colspan/rowspan behavior in tableless (e.g. div.table {display: table;} div.tr {display: table-row;} etc.) table?
I would imagine that this would be covered by CSS Tables, a specification which, while mentioned on the CSS homepage, appears to currently be at a state of "not yet published in any form"
In practical terms, you can't achieve this at present.
you can simply use two table divs, for instance:
<div style="display:table; width:450px; margin:0 auto; margin-top:30px; ">
<div style="display:table-row">
<div style="width:50%">element1</div>
<div style="width:50%">element2</div>
</div>
</div>
<div style="display:table; width:450px; margin:0 auto;">
<div style="display:table-row">
<div style="width:100%">element1</div>
</div>
</div>
works great!
So basically, you've turned all your <table>, <tr> and <td> elements into <div> elements, and styled them to work exactly like the original table elements they've replaced?
What's the point in that?
It sounds like someone's told you that you shouldn't be using tables in modern web design, which is sort of right, but not in this way -- what you've done doesn't actually change anything about your code. It certainly hasn't got rid of the table; it's just made it harder to read.
The true meaning of the point about not using tables in modern sites is to achieve the page layout you want without using the kind of layout techniques that involve setting out a grid of table cells.
This is achieved by using position styles and float styles, and a number of others, but certainly not display:table-cell; etc. All of this can be achieved without ever needing colspans or rowspans.
On the other hand, if you are trying to place an actual block of tabular data on the page - for instance a list of items and prices in a shopping basket, or a set of statistics, etc, then a table is still the correct solution. Tables were not removed from HTML, because they are still relevant and still useful. The point is that it is fine to use them, but only in places where you are actually display a table of data.
The short answer to your question is I don't think you can -- colspan and rowspan are specific to tables. If you want to carry on using them, you will need to use tables.
If your page layout is such that it relies on tables, there really isn't any point doing a half-way house effort to get rid of the table elements without reworking how the layout is done. It doesn't achieve anything.
Hope that helps.
Trying to think in tableless design does not mean that you can not use tables :)
It is only that you can think of it that tabular data can be presented in a table, and that other elements (mostly div's) are used to create the layout of the page.
So I should say that you have to read some information on styling with div-elements, or use this page as a good example page!
Good luck ;)
You could always use CSS to simply adjust the width and the height of those elements that you want to do a colspan and rowspan and then simply omit displaying the overlapped DIVs. For example:
<div class = 'td colspan3 rowspan5'> Some data </div>
<style>
.td
{
display: table-cell;
}
.colspan3
{
width: 300px; /*3 times the standard cell width of 100px - colspan3 */
}
.rowspan5
{
height: 500px; /* 5 times the standard height of a cell - rowspan5 */
}
</style>
In order to get "colspan" functionality out of div based tabular layout, you need to abandon the use of the display:table | display:row styles. Especially in cases where each data item spans more than one row and you need different sized "cells" in each row.
<div style="clear:both;"></div> - may do the trick in some cases; not a "colspan" but may help achieve what you are looking for...
<div id="table">
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<div class="table_row">
<div class="table_cell1"></div>
<div class="table_cell2"></div>
<div class="table_cell3"></div>
</div>
<!-- clear:both will clear any float direction to default, and
prevent the previously defined floats from affecting other elements -->
<div style="clear:both;"></div>
<div class="table_row">
<!-- the float is cleared, you could have 4 divs (columns) or
just one with 100% width -->
<div class="table_cell123"></div>
</div>
</div>
I've achieved this by separating them in different , e.g.:
<div class="table">
<div class="row">
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
<div class="col">TD</div>
</div>
</div>
<div class="table">
<div class="row">
<div class="col">TD</div>
</div>
</div>
or you can define different classes for each tables
<div class="table2">
<div class="row2">
<div class="col2">TD</div>
</div>
</div>
From the user point of view they behave identically.
Granted it doesn't solve all colspan/rowspan problems but it does answer my need of the time.
you just use the :nth-child(num) in css for add the colspan like
<style>
div.table
{
display:table;
width:100%;
}
div.table-row
{
display:table-row;
}
div.table-td
{
display:table-cell;
}
div.table-row:nth-child(1)
{
display:block;
}
</style>
<div class="table>
<div class="table-row">test</div>
<div class="table-row">
<div class="table-td">data1</div>
<div class="table-td">data2</div>
</div>
</div>
You can use Normal TR, TD and use colspan in td, It works as a hack.
You can do this ( where data-x has the appropriate display:xxxx set ):
<!-- TH -->
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
<div data-th style="width:25%">TH</div>
</div>
</div>
</div>
<div data-th style="width:25%">TH</div>
</div>
<!-- TD -->
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-th style="width:50%">
<div data-table style="width:100%">
<div data-tr>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
<div data-td style="width:25%">TD</div>
</div>
<div data-tr>
...
</div>
</div>
</div>
<div data-td style="width:25%">TD</div>
</div>
Related
I am pretty new to bootstrap and have been beating my head up with the following problem. Whenever I use the following code, the padding between the columns is getting lost.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
<div class="col-sm-4 col"></div>
</div>
</div>
</body><!--end body-->
But whenever I move the class col inside the column, then the code works exactly as expected.
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
<div class="col-sm-4">
<div class="col"></div>
</div>
</div>
</div>
</body><!--end body-->
Following is the CSS class that I am using
<style>
.col{
min-height: 500px;
background-color: gray;
}
</style>
Bootstrap does not add space between the columns, it adds space inside each column. So if you put another div inside each column that will give the space you want.
The way I look at it is the columns only act as containers for the actual content, which goes inside them.
jsfiddle of the kind of thing I think you should do instead: https://jsfiddle.net/bqadptzL/
CSS:
.col {
/* just to demonstrate */
background-color: red;
}
.box {
background-color:gray;
min-height: 500px;
}
HTML:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
<div class="col-sm-4 col">
<div class="box">
Content
</div>
</div>
</div>
</div>
</body><!--end body-->
If you look at the grid system examples, you will see there is no space between the columns, only inside them. http://getbootstrap.com/css/#grid
Hope that helps.
Sidenote: you should not put columns inside columns, you should only put columns inside rows. But you can put rows inside columns. So you can alternate row - column - row - column, not row - column - column. This is how Bootstrap system is meant to work.
When you use the second version you get a margin created by the div you added,
if you add a margin to the .col css class you should see the difference.
You can take a look here for a more detailed answer about how to work with the columns in bootstrap with a similar issue
The padding is not getting lost. In Bootstrap, col-sm-* has 15px padding. Remember, the background color fills entire the width of the cell, padding included.
You're putting the bg color on the column with padding, and in the other case it's on the inner column that doesn't have padding.
Put the background-color and a border, only on the col-sm-4. and you'll see the difference. The padding is there, and the same in both cases...
http://www.codeply.com/go/lf2V9vlIsr
I have datatable table usng the rowgrouping plugin. I want to jump rows within groups to the right.
Simply said: .group-item class TRs should be moved lets say 10px to the right. How to do that?
I've tried display:block and than margin-left:10px, but that breaks column widths.
To put a jump on an html <tr> is impossible due to the nature of HTML tables. You'll have to change structure a bit.
Option 1, nest a new table
<style>
.subTable {
margin-left: 10px;
}
</style>
<table>
<tr>
<td>
<table class="subTable">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Option 2 is to use some other kind of structure and emulate a table look:
<style>
.jump-over {
position: relative;
left: 10px;
}
</style>
<div class="table">
<div class="row">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
<div class="row jump-over">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
<div class="row">
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
The other CSS for this should be simple and governed by your individual design. You could use a grid framework to do the row and columns for you, but I wouldn't try to make it responsive as this would break the table emulation.
Both of the previous options will not preserve the original table's column widths; the sub-table will have it's own column widths based on its content and the div's will have to have explicitly set widths to start with.
There is one other very ugly option that I do not recommend: it can be done by inserting an extra <td> as the first child of the row in question, but then all previous first children of the parent table will have to have col-span set to 2 (+1 for each nested table beneath it). You can see why that would be a bad idea.
Disclaimer: this is untested code and is meant merely to illustrate a technique.
I would like to build a sort of "stack" of divs (with class .inner) within a containing div (#container) where each inner is pushed as far down in the container as possible without overlapping another inner. I've included illustrations of what this would look like with one and three inners, respectively:
I know I could get the result on the left by setting...
#container { position: relative; }
.inner {
position: absolute;
bottom: 0;
}
...but this solution would not scale to the example on the right - instead it would cause all of the inners to overlap one another. Is there any good way to accomplish what I want through CSS alone for an arbitrary number of inners? I know I could do it with some hacky Javascript.
You could use an additional container for the inner containers and use the trick you suggested.
<style>
div{border:1px solid red}
#container{height:1000px;}
#inner-container{position:absolute;bottom:0px;}
.inner {height:200px;width:200px;margin:5px;;
</style>
<div id="container">
<div id="inner-container">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
Depends on what browsers you need to support. But a much cleaner solution would be to try mimicking some table layout in CSS.
I've not had a chance to thoroughly test this with IE8+, but most modern browsers can handle CSS table layout properties which would allow you to do something like this relatively easily.
So...
CSS
.container { display: table-cell; vertical-align: bottom; height: 400px}
HTML
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
The only caveat is that if you have two of these "container" divs following each other in the code, than they will behave like table-cells (TDs) and sit next to each other.
If you want to stack them, then you can get around this by wrapping the containers in a div without the table-cell style, or sticking another element inbetween... e.g.
<div>
<div class"container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
<div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
</div>
OR...
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
<div></div>
<div class="container">
<div class="inner">1</div>
<div class="inner">2</div>
<div class="inner">3</div>
</div>
I have a layout built using CSS display:table (inline, row, cell, etc). I'm doing local development on it with apache, and when I refresh the page, two of the div containers are incorrectly lined up. However, if I uncheck and re-check display:table-row, they correct themselves, and the page displays correctly.
http://jsfiddle.net/fNNKT/
You can see the HTML and CSS at the jsFiddle above. It's actually not working there either, so maybe I'm doing something wrong, and can use help with that.
<div class="cabinet-container">
<div class="mode-bar">
<div class="mode-bar-left">
<div class="mode-bar-item">logo</div>
<div class="mode-bar-item active">Dispense</div>
<div class="mode-bar-item">Inventory</div>
</div>
<div class="mode-bar-right schedule">
<div class="mode-bar-item">Sign-Out</div>
</div>
</div>
<div class="table"></div>
<div class="left-container"></div>
<div class="center-container">
<div class="search-container">
<div class="table-cell">
<div class="search-field"></div>
</div>
</div>
<div class="nav-button-center-container">
<div class="table-cell">
</div>
</div>
<div class="list">
<div class="table-cell">
<div class="list-item-center-container"></div>
<div class="list-item-center-container"></div>
<div class="list-item-center-container-partial"></div>
</div>
</div>
<div class="nav-button-center-container-down-active">
<div class="table-cell"></div>
</div>
</div>
<div class="footer">
<div class="button-group table-border-5">
<div class="button-secondary">Dispense Non-Drug</div>
<div class="button-secondary">Sort By: Last Name</div>
</div>
<div class="button-group-right table-border-5">
<div class="button-primary">New Clinical Order</div>
</div>
</div>
</div>
Is your question related to .mode-bar-left and .mode-bar-right wrapping onto two lines? If so, the problem relates to whitespace. Think of two images displayed inline, side by side. If there's whitespace between the tags in the code, there will be whitespace displayed in the browser.
Solution #1:
Take your logic one level higher up in the DOM. Change the display value for both mode-bar elements to table-cell (instead of the current inline-table). Then change the .mode-bar-item elements to display: inline-block (instead of table-cell).
Solution #2:
A faster, less elegant solution is to add float: left to .mode-bar-left.
On the topic of elegance, I strongly recommend that you consider some more semantically meaningful tags than just div. For example, .mode-bar-left is clearly a list (ul perhaps?) and the .mode-bar-item elements are clearly list items (li).
Are you using any javascript/jQuery? On a recent project of my own, I was having a similar issue and all I had to do was move my custom lightbox script from the to right before the tag, and it seemed to fix the issue. Sometimes javascript can be wonky like that. I don't understand why, but that's the way it is.
What I am trying to accomplish is having a fixed-width first div and a fluid second div which will fill up the rest width of the parent div's width.
<div class='clearfix'>
<div style='float:left; width:100px;'>some content</div>
<div style='float:left'>some more content</div>
</div>
and on this one everything seems alright and fluid.
<div style='display:table'>
<div style='display:table-cell; width:100px;'>some content</div>
<div style='display:table-cell'>some more content</div>
</div>
I want to go ahead with the second one but i feel like the second example will give me headaches in the future.
Could you offer some suggestions or insights?
display: table-cell is perfectly fine to use, with just one downside..
It doesn't work in IE7 (or IE6, but who cares?): http://caniuse.com/#search=css-table
If you don't need to support IE7, then feel free to use it.
IE7 still has some usage, but you should check your Analytics, and then make a decision.
To answer your specific use case, you can do it without display: table-cell, provided that you don't need the height to adjust based on content:
http://jsfiddle.net/g6yB4/
<div class='clearfix'>
<div style='float:left; width:100px; background:red'>some content</div>
<div style='overflow:hidden; background:#ccc'>some more content</div>
</div>
(why overflow: hidden? With: http://jsfiddle.net/g6yB4/3/ vs without: http://jsfiddle.net/g6yB4/4/)
You could do something like this. It puts your main content first. You can use a vertically repeating css background image on your main "content" container to create the illusion of a background running all the way down the left column.
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
</div>
To extend to a 3-column with fluid center:
<div id="content" style="clear:both;">
<div id="mainwrap" style="float:left; width:100%;">
<div id="main" style="margin-left:100px; margin-right:100px;">
Main content here
</div>
</div>
<div id="leftnav" style="float:left; width:100px; margin-left:-100%;">
Left content here
</div>
<div id="rightnav" style="float:left; width:100px; margin-left:-100px;">
Right content here
</div>
</div>
To get the first example working, you should also float the containing div, this will make sure that both of the elements within sit as you would expect within it. Not really sure what you mean by 'is a pain', though?
One down side of using table-row (very related to the OP) is that you can't use margin/padding on a row.