Is there a trick to make the backgoud color of the thead overlay the border of the table? The solution only needs to work in chrome (node-webkit). Added a fiddle and image to illustrate:
http://jsfiddle.net/bc5GZ/4/embedded/result/
http://postimg.org/image/cjoulhs5f/
table{
border:black 1px solid;
}
thead{
/*some clever code to make the background of thead overlay the table border*/
}
Edit: Edited the fiddle to make the code easier to read and added a picture to illustrate
You can use div elements with their respective display properties instead of tables, table cells and rows; and style them accordingly (tables are somewhat deprecated now - plus divs are easier to render and they're friendlier with css. Divs are the future, yay!).
<div class=table>
<div class=table_header>
<div class=header_cell>A</div>
<div class=header_cell>B</div>
<div class=header_cell>C</div>
</div>
<div class=table_row>
<div class=table_cell>1</div>
<div class=table_cell>2</div>
<div class=table_cell>3</div>
</div>
</div>
You can see this fiddle here.
Do you looking for this..
EDIT
fiddle-1: http://jsfiddle.net/WTc3J/3/
No border for thead
fiddle-2: http://jsfiddle.net/WTc3J/4/
No border for td , thead, and table
Hope this will help you..let me know..
Related
lets see this table:
<table border="1">
<tr><td>1111</td><td>42342324</td><td>ffffffff</td></tr>
<tr><td>11</td><td>442324</td><td>fdadasdfffffff</td></tr>
</table>
I need to do something like that but with DIV elements (sorry, boss wont allow tables). The real problem is, how to set same widths without direct setting it? I mean, if the first row is longer, then it will be actual width, otherwise the 2nd row's.
Preferably without javascript/jQuery hacking.
I'm assuming you want the "columns" to grow in width together with the content? dynamically setting the width of each div in the column?
I can't think of a way to do this with css, but some jiggery pokery with some divs might work.
<style>
.table{
border:1px solid black;
position:relative;
}
.column{
border:1px solid red;
display:inline-block;
}
.cell{
border:1px solid blue;
float:left;
clear:both;
}
</style>
<div class="table">
<div class="column">
<div class"cell">11</div>
<div class"cell">ffff</div>
</div>
<div class="column">
<div class"cell">1111</div>
<div class"cell">f</div>
</div>
<div class="column">
<div class"cell">1</div>
<div class"cell">fff</div>
</div>
</div>
I think you want to check out flexbox for modern browsers, with a JavaScript fallback for older browsers.
http://css-tricks.com/using-flexbox/
Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the "Old" and "New" syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids
http://caniuse.com/flexbox shows pretty decent support.. IE10, FF, Chrome, Safari, and even Opera! *
*using combined "old and new" syntax
<div id="main_div">
<div id="nr1"> </div>
<div id="nr2"> </div>
</div>
and you use css to style : width ,height ,margin ,position of each div
I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:
<div style="width:200px;height:100px;border:6px outset orange;">text</div>
Use
background:#fff
or any color;
and one more advise never use inline css for optimal output use external CSS
<div id="something">text</div>
#something
{
width:200px;
height:100px;
//likewise
}
Here you go: http://jsfiddle.net/XVDkS/
Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN article for more details on box-shadows.
It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).
use the background property, for example:
background:#ccc;
which would leave your code looking like this:
<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>
<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>
use css background property
If you mean a background this will help
CSS
backgound:black;
HTMl with CSS
<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>
you can use groove or ridge in place of outset,
See here is some examples for this on W3schools
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
or if you want 2 borders and a different border then you try this
<div style="width:200px;height:100px;border:1px solid #000">
<div style="width:190px;height:90px;border:5px solid orange">
<div style="width:188px;height:88px;border:1px solid #000">
test
</div>
</div>
</div>
Demo is here:
http://jsfiddle.net/SPhec/
How can I style a group of related divs to look like a table per the attached image? Thx!
<div class="collection"
<div class="group">
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
... repeats n times
</div>
Disclaimer: This particular html output is auto-generated and I don't have control over what is generated. I just have divs to work with and I want to style accordingly.
Sorry guys, but, what the float?
while you all tried to proscribe what you think the OP needs, the answer to the question actually is
.collection {display:table}
.group {display:table-row}
.label, .value {display:table-cell}
I believe
.label {
width: 200px;
float: left;
}
(apart from the other styling) will do the thing for you.
html
<div class="collection">
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
<div>
<div class="label">Label1</div>
<div class="value">Value1</div>
</div>
</div>
css
.label { float:left; width:200px; border-top:1px solid #ccc; }
.value { margin-left:200px; background:#fffced; border-top:1px solid #ccc; }
Code: http://jsfiddle.net/wWGG8/1/
I would just use a table. You can read about tables in HTML here The <tr> tag defines a table row. The <td> tag defines the table data. Each <td> tag is a new column.
<table>
<tr><td>This is the table data</td><td>This is more table data in the same row</td></tr>
<tr><td>Here is another row</td><td>This is more table data in the second row</td></tr>
</table>
True, you can just use a table. That would be semantically convenient.
Nonetheless, you can stick to your current HTML structure.
Just assign the divs with classes of label and value with a width and then float them to the left.
You might also need to specify a height for the div with class group.
Consider the following snap on my site.
The area in red is a table that's being rendered dynamically and is in a separate div. The bottom 3 rows are in a different tables in a different div which is static. As these two are basically different tables, the check boxes don't align themselves. These divs are part of a liquid layout and are in the left hand column. Is there a way to align them without fixing the table, row and column widths? Or maybe fool those two tables to believe that they are actually one and align them?
Here is the structure
<div id='dynamic_in_red_border'>
<table id="one">
</table>
</div>
<div id="bottom">
<table id="static">
</table>
</div>
Hope my question is clear.
PS: the red box is just to make my point, its not there on the actual UI
You can dynamically insert rows using jQuery or pure JS. I'll do jQuery for now:
HTML:
<table id="foo">
<tr><td>foo</td></tr>
</table>
JavaScript (with jQuery):
var td = $('<td>').html('bar');
var tr = $('<tr>').append(td);
$('table#foo').append(tr);
I would have thought this should work:
<style>
div.container {display:table;} /* For a container including both tables */
table {display:table-row-group;}
/* Redundant, but just putting here for experimenting */
tbody {display:table-row-group;}
tr {display:table-row;}
td {display:table-cell;}
/* Add some visible borders */
div, td {border: inset black 2px;}
</style>
...but from my tests in Chrome and Firefox, it only works when the file is true XHTML (with XHTML extension or explicit application/xhtml+xml content-type header) or pure XML (.xml extension), and only if there is a single container div.
I haven't tested this but this is what I would try.
You could try wrapping both table container divs in a div (#tables_container), that has position:relative, then give both current divs width 100%. So something in the lines of
#tables_container {position:relative; width: 20%; }
/* width to be the left column width*/
#dynamic_in_red_border table,
#bottom table {width: 100%;}
<div id="tables_container">
<div id='dynamic_in_red_border'>
<table id="one">
</table>
</div>
<div id="bottom">
<table id="static">
</table>
</div>
</div>
After getting the table-widths to match, you could just give the check-box cells text-align: right. But if you want to align the table cells too, it gets more difficult.
I have the following:
<div style="width:100%;">
<table>
<tr>
<td style="width:30px;">hi</td>
<td style="width:40px;">hi</td>
<td id="lotoftext" style="width:auto;white-space:nowrap;overflow:hidden;">LOTS Of text in here, LOTS</td>
<td style="width:25px;">hi</td>
</tr>
</table>
</div>
What I want to happen is for this table to grow to 100% possible of the outer DIV. Problem is, that the table, with a lot of text inside, ID='lotoftext' is causing the table to grow to a width bigger than the outer div which then breaks the page.
Any ideas? thanks
can you use max-width? You might need to put a div inside that specific TD and give that the max-width
Unless it is tabular data, you should build it using DIVs and CSS. You should be able to achieve what you want with less of a headache this way.
AnApprentice, to achieve this layout using DIV's and CSS (alternate option to using tables) you could approach the situation like this:
CSS:
#body_container{
max-width:700px;
}
.data-container{
background-color:#ccc;
zoom:1;
}
.data-content_a{
width:30px;
float:left;
background-color:#3FF;
}
.data-content_b{
width:40px;
float:left;
background-color:#CF0;
}
.data-content_c{
width:25px;
float:right;
background-color:#9FF;
}
.data-content_lotsoftext{
float:left;
background-color:#FCF;
margin:-20px 26px 0 71px;
clear:left;
display:inline;
}
.clear{
clear:both;
padding:0;
margin:0;
}
HTML:
<div id="body_container">
<div class="data-container">
<div class="data-content_c">4</div>
<div class="data-content_a">1</div>
<div class="data-content_b">2</div>
<div class="data-content_lotsoftext">lots of text goes here!</div>
<div class="clear"></div>
</div>
</div>
The #body_container (or outter container) can to set to any width or no width. The left margin on the .data-content_lotsoftext is the combined width of .data-content_a and .data-content_b (70px + 1px to be on the safe side) and the right margin on .data-content_lotsoftext is the width of data-content_c (25px + 1px to be on the safe side).
By not assigning a width to .data-content_lotsoftext it will automatically stretch to be full width. display:inline helps it sit better in ie6.
Tested in Firefox, Chrome, IE8, IE7 and IE6 (IE6 and 7 are a little glitchy - if anyone could help refine the CSS to get it to work perfectly in IE6 and 7, please shout out!)
Hope this helps.
Dan
The scenario you are describing is simply not suited for a table. A table should only be used when displaying tabular data. You should be using some other kind of html elements to build your structure and style it with CSS.