You can see in this example:
http://jsfiddle.net/noamway/AVwsP/
<div style="width: 100%; display: table; border: 1px solid black;">
Hello
</div>
<table style="width: 100%; border: 1px solid black; border-spacing: 0;">
<tr>
<td>Hello</td>
</tr>
</table>
That they are the same but the border make the different.
Any solution to that?
Thanks
Add box-sizing:border-box to the div so that the borders are rendered within the box as apposed to outside.
FIDDLE
how about this,
<div style="border: 1px solid black;">
Hello
</div>
<table cellspacing="0" cellpadding="0" width="100%" style="border: 1px solid black; border-spacing: 0;">
<tr>
<td>Hello</td>
</tr>
</table>
Related
I have the the following table structure, but I want to change it to this table structure.
I have looked at posts on SO and other places but have not been able to find a solution. Is this possible using css? This SO posts is the closest I have found but it still does not work as needed.
Can someone please guide me on how to approach this?
You can use one table per row as a workaround, with CSS for the borders as shown below:
table {
border-collapse: collapse;
width: 100%;
}
td {
padding: 4px;
border: 1px solid #ccc;
border-bottom: none;
}
table:last-of-type td {
border-bottom: 1px solid #ccc;
}
<table>
<tr>
<td>Test Test Test Test Test Test</td>
<td>Test Test</td>
<td>Test Test Test Test</td>
</tr>
</table>
<table>
<tr>
<td>Test Test</td>
<td>Test Test Test Test</td>
<td>Test Test Test Test Test Test Test</td>
</tr>
</table>
Using flex you can do this with align-items: stretch;
#container {
width: 200px;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
#container div {
height: 30px;
border: solid 1px black;
margin: 5px;
}
<div id="container">
<div style="width: 80px;"></div>
<div style="width: 35px;"></div>
<div style="width: 35px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
<div style="width: 50px;"></div>
</div>
I have a table with border-collapse and most cells with dotted border.
The rendering in Firefox is odd.
The code is:
<table style="border-collapse: collapse">
<tr>
<td style="border: 1px solid blue">a</td>
<td style="border: 1px solid blue">b</td>
</tr>
<tr>
<td style="border: 1px dotted blue">a</td>
<td style="border: 1px dotted blue">b</td>
</tr>
</table>
This is how it renders in Chrome vs Firefox:
Any ideas how to fix it?
There are bugs in browsers in rendering one pixel wide dotted borders, but there's no workaround for border of size 1px .In this particular case, the bug seems to disappear if you set the border width to 2px or more.
table td{
margin:0;
}
<table style="border-collapse: collapse">
<tr>
<td style="border: 2px solid blue">a</td>
<td style="border: 2px solid blue">b</td>
</tr>
<tr>
<td style="border: 2px dotted blue">a</td>
<td style="border: 2px dotted blue">b</td>
</tr>
</table>
As an alternative you can use CSS Outlines.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
However, keep in mind that outlines are unlike borders:
Outlines never take up space, as they are drawn outside of an element's content.
So in that case with border collapse your outlines would run over each other on your table cells. This can fixed by adding a -1px outline-offset.
Two examples are below, First table using outline, and the second table using border for comparison.
Obligatory Fiddle:
https://jsfiddle.net/sh9oqq2k/1/
Browser support:
https://caniuse.com/#search=outline
/* global */
table {
border-collapse: collapse;
}
td {
padding: 8px;
}
/* outline */
tr:nth-child(1) td {
outline: 1px solid blue;
outline-offset: -1px;
}
tr:nth-child(2) td {
outline: 1px dotted blue;
outline-offset: -1px;
}
/* border */
table.bordered tr:nth-child(1) td {
border: 1px solid blue;
}
table.bordered tr:nth-child(2) td {
border: 1px dotted blue;
}
<p>
Outline
</p>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
<p>
Border
</p>
<table class='bordered'>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
I am finding it difficult in inserting an image into my table cell. When I am trying to completely fill the table cell with an image, The size of the table cell is increasing and taking up the whole page.
Here is my code:
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%">
<img src="131AZE.jpg" style="height:100%;width: 100%">
</td>
<td>Everyone</td>
</tr>
</table>
</div>
and the css part is:
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
}
This is because <table> has a default spacing in cell which we need to clear if not needed.
<table class = "BarTable" style="width:100%;height: 100%" cellpadding="0" cellspacing="0">
You could give the cell with the image the following properties:
width: 1%;
white-space: nowrap;
This will prevent your image from stretching as it does in the code you provided, and the cell will wrap the image perfectly.
Full demo
#bar {
height: 45%;
width: 100%;
}
table.BarTable,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.myclass {
width: 1%;
white-space: nowrap;
}
<div id="bar">
<table class="BarTable" style="width:100%;height: 100%">
<tr>
<td class="myclass"><img src="http://rs902.pbsrc.com/albums/ac222/jvac/pattern-background.png~c200"></td>
<td>Everyone</td>
</tr>
</table>
</div>
There is a little gap between the image and the border of the cell ¿Is this the problem? only you have set td padding:0
#bar {
height:45%;
width: 100%;
}
table.BarTable,th,td {
border:1px solid black;
border-collapse: collapse;
line-height: 0;
padding:0;
}
<div id="bar">
<table class = "BarTable" style="width:100%;height: 100%">
<tr>
<td style="width: 35%"><img src="http://lorempixel.com/400/200/" style="height: 100%;width: 100%"></td>
<td>Everyone</td>
</tr>
</table>
</div>
How can I write the following html table attributes into an equivalent css?
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc"></table>
Thanks.
So simple. Look at the following.
<table class="test">
.test
{
background-color:#fff;
text-align:center;
margin:0px auto;
width:600px;
border:1px solid #ccc;
}
table {
background-color: #fff;
text-align: center;
border: 1px solid #ccc;
width:600px;
}
This should do it.
The following code is a equivalent to your code:
table {
background-color:#fff;
border:1px solid #ccc;
margin:0 auto;
width:600px;
}
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
To see the (non existing) difference, here your example with a row:
<table bgcolor="#ffffff" align="center" border="0" style="width:600px;border: 1px solid #cccccc">
<tr>
<td>Col1</td>
<td>Col2</td>
</tr>
</table>
Please have a look in the following URL:
"http://jsfiddle.net/7rsx0r4h/"
I want the output like the output table with border and should be look like separate box but don't want to change my html (div layout). Also every box i require some space then another box start.
Thanks,
Manish
demo - http://jsfiddle.net/victor_007/7rsx0r4h/1/
added outline for the first div
change body to the parent id or class
body > div {
outline:1px solid #4679bd;
}
changed border color to white so that it looks like empty space
div div {
border-top: 2px solid white;
}
body > div {
outline: 1px solid #4679bd;
}
div {
width: 496px;
border: 2px solid white;
border-top: 0;
color: #fff;
text-align: center;
font-size: 120%;
background: #4679bd;
}
div div {
font-size: 100%;
width: auto;
border: 0;
border-top: 2px solid white;
line-height: 250%;
}
<p>Divs:</p>
<div>
<div>1
<div>1.1
<div>1.2
<div>1.2.1</div>
</div>
</div>
</div>
<div>2
<div>2.1
<div>2.2
<div>2.2.1</div>
</div>
</div>
</div>
<div>3</div>
<div>4</div>
</div>
<br />
<p>Table:</p>
<table border="1px" width="500px">
<tr>
<td>1</td>
</tr>
<tr>
<td>1.1</td>
</tr>
<tr>
<td>1.2</td>
</tr>
<tr>
<td>1.2.1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>3.1</td>
</tr>
</table>