I've been trying to mimic the following table layout using HTML/CSS:
NOTE: It's a table from LibreOffice Writer which I modified using Gimp to show you what I mean.
As you can see, I'd like to add some left padding to some rows to show visually that they are inside a group.
I tried using padding-left of both <td> and <tr>, and a little trick that don't work: applying 'border-left: 14px solid white' to the <tr> and then 'border-left: 15px solid black' to the first <td> in the row. I thought that the border in the <td> would overlap the <tr> border by 1px, but HTML rendering seems not to work that way :)
Also, I tried to do this:
<tr>
<td colspan="9">
GROUP 1
</td>
</tr>
<tr>
<td colspan="9" style="padding-left: 15px">
<table>
<tr>
<td> <!-- # --> </td>
<td> <!-- Id --> </td>
<td> <!-- Field1 --> </td>
(ETC)
<td> <!-- Comment --> </td>
</tr>
</table>
</td>
</tr>
The problem with this approach is that the column lines of the inside the 'group' don't match the ones that are outside so it doesn't look good...
Any suggestion?
Try this. Remove borders from table cells, instead add divs within each table cell with the border:
<tr>
<td colspan="4">
<div class="cell">GROUP 1</div>
</td>
</tr>
<tr>
<td style="padding-left: 15px">
<div class="cell"> col 1</div>
</td>
<td>
<div class="cell"> col 2</div>
</td>
<td>
<div class="cell"> col 3</div>
</td>
<td>
<div class="cell"> col 4</div>
</td>
</tr>
CSS:
div.cell {
border-left: 1px solid #000;
border-right: none;
border-bottom: none;
}
table {
border-collapse: collapse;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
table td {
padding: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
See example here: https://codepen.io/anon/pen/baMdWP
Suggestion:
.with-padding {
margin-left: 10px;
}
<table class="normal">
...
</table>
<table class="with-padding">
...
</table>
<table class="normal">
...
</table>
Assign padding-left: 15px to every sub-sequent <tr> that is to be displayed as part of the group. It's better to use a class instead of applying inline style.
Try this way.
HTML
<table style="width:100%">
<tr>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<td colspan="9">
GROUP 1
</td>
</table>
<table style="width:95%;margin-left:5%">
<tr>
<td style="width:20%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
<td style="width:25%;">January</td>
<td style="width:25%;">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
</table>
CSS
table,th,td {
border: 1px solid black;
}
Related
I have a table with the following class:-
.multicolor {
border: 1px solid #000000;
}
and for one specific table row I wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how I was trying it and no any luck.
<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
</tr>
The top and the bottom borders are appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?
try this.
table {
border-collapse:collapse;
}
td {
border:none;
}
You have to set border of your td or th "none";
May be this will help hide cells border using css
hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
<tr class="first">
<td>asdas</td>
<td>asdas</td>
<td >boooo</td>
</tr>
<tr class="second">
<td>asdas</td>
<td>asdas</td>
<td>asdas</td>
</tr>
</table>
see the below fiddle
fiddle demo
try this,working fine
<style>
.border {
border:solid 1px #000;
}
.border-head {
border-bottom:solid 1px #000;
}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
<tr>
<td class="border-head"> </td>
<td class="border-head"> </td>
<td class="border-head" > </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
I have a very simple problem: I need to center a table inside a TD element. If I were using HTML 4 I'd do it like this:
<table style="border:solid;width: 100%">
<tr>
<td align="center">
<table style="border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But I'm trying not to use deprecated attributes and do it the CSS way. I already tried this:
<td style="text-align:center">
And this:
<td style="margin: 0 auto">
And the tables keeps in the left-side of the cell. Any suggestions?
You had the right idea with margin:auto 0; just take off the 0.
Working example: http://jsfiddle.net/cxnR8/
<table style="border:solid;width: 100%">
<tr>
<td>
<table style="margin:auto;border:solid; width:50%">
<tr>
<td >I must be in the center</td>
</tr>
</table>
</td>
</tr>
</table>
But, more importantly, do you really need to use tables and in-line styling?
Center the table using the deprecated align="" attribute.
<table>
<tr>
<td>
<table align="center">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
Your seccond suggestion is correct. See this working example.
HTML:
<table class="outer">
<tr>
<td>
<table class="inner">
<tr>
<td>in the middle</td>
</tr>
</table>
</td>
</tr>
</table>
CSS:
.outer
{
width: 100%;
border: solid 1px red;
}
.inner
{
width: 25%;
margin: auto;
border: solid 1px blue;
}
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
how do i make a table like this?
abc |la
sa |___
cdef|hi
basically the borders like that
If I understood correctly, you want one high cell next to two smaller ones. That can be achieved with the rowspan attribute like this:
<table>
<tr>
<td rowspan="2">abc sa cdef</td>
<td>la</td>
</tr>
<tr>
<td>hi</td>
</tr>
</table>
a quick fix would be the following:
html:
<table>
<tr>
<td class="left">abc</td>
<td class="right1">la</td>
</tr>
<tr>
<td class="left">sa</td>
<td class="right2">&nbps;</td>
</tr>
<tr>
<td class="left">cdef</td>
<td class="right1">hi</td>
</tr>
</table>
css:
td.left { border-right:1px solid black; }
td.right2 { border-bottom:1px solid black; }
<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>
</tr>
</table>
css
td.border-r
{
border-right:1px solid #000000;
}
td.border-b
{
border-bottom:1px solid #000000;
}
<table>
<tr>
<td class="border-r"> abc </td>
<td> la </td>
</tr>
<tr>
<td class="border-r"> sa </td>
<td class="border-b"> </td>
</tr>
<tr>
<td class="border-r">cdef</td>
<td> hi </td>