Aligning Tables Within a Div Table - html

I have replaced a table containing four tables (in a grid) with a div-table containing the four tables as cells. Two things that I absolutely can't seem to get to work are:
How do I get rid of the table border of the div tag using display: table?
The bottom left table insists on lining up with the far left edge of the cell and I want it to line up with the far right edge of the cell. Even relative positioning is having no impact on this one.
Here is the CSS:
<style type="text/css">
.Dashboard {
display: table;
border-collapse: collapse;
border-width: 0px;
}
.row1 {
display:table-row;
}
.row2 {
display:table-row;
height: 200px;
}
.cell1 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
.cell2 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
.cell3 {
display: table-cell;
padding: 2px;
border: 1px solid black;
text-align: right;
vertical-align: top;
}
.cell4 {
display: table-cell;
padding: 2px;
border: 1px solid black;
}
table.inner {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
padding: 2px;
}
td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
padding: 2px;
}
td.image {
padding: 0;
margin: 0;
}
</style>
And the table layout looks like this:
<div runat="server" id="Dashboard" class="Dashboard">
<div class="row1">
<div class="cell1">
<table class="inner" id="t1">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
<div class="cell2">
<table class="inner" id="t2">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
</div>
<div class="row2">
<div class="cell3">
<table class="inner" id="t3">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
<div class="cell4">
<table class="inner" id="t4">
<tr>...</tr>
...
<tr>...</tr>
</table>
</div>
</div>
</div>
Any advice is appreciated.

To get rid of the border use
border: none;
With the positioning, find the bottom left table id and use
float: right;
But your best option is to get rid of tables anyways. All of this can just as easily be done with straight css.

Related

My table rows are not aligned properly. How to achieve it?

I have some HTML markup; I created a each table for one record but as shown in img. The text is not aligned properly and ignores <% %> inside there are deluge script, I remove deluge script for easily understandable purpose. I want to display in center even if word is too long, then it should not affect on next row.
Code:
* {
box-sizing: border-box;
}
.row {
margin-left:-5px;
margin-right:-5px;
}
.column {
float: left;
width: 32%;
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
style=whitespace-wrap:nowrap;
}
tr, td {
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.2);
color:#000000;
whitespace-wrap:nowrap;
}
a {
color:#000000;
}
[class*="column"] {
width: 100%;
}
<div class="row">
<div class="column">
<table>
<tr>
<td><%=rec1%></td>
<td><%=s1%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec2%></td>
<td><%=s2%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec3%></td>
<td><%=s3%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec4%></td>
<td><%=s4%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec5%></td>
<td><%=s5%></td>
</tr>
</table>
</div>
<div class="column">
<table>
<tr>
<td><%=rec6%></td>
<td><%=s6%></td>
</tr>
</table>
</div>
</div>
<div>No Country Available!</div>
</table>
Thanks in advance.
I think i understood what you said.
You should apply a 50% width for every
This will be the css
* {
box-sizing: border-box;
}
.column {
padding: 5px;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #ddd;
width: 100%;
}
tr,
td {
width: 50%;
text-align: center;
padding: 20px;
margin-bottom: 10px;
background-color: #f2f2f2;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2);
color: #000000;
whitespace-wrap: nowrap;
}
a {
color: #000000;
}
Here is a Codepen
Code
Maybe you can add tag and then close it where you want. Add the center tag at the column which you want to have centered text. Then, to not affect other rows give width to the column where you have given the center tag. THis will not affect anything else.

How to center tbody within a table while having text-align:left?

#present-container{
background-color: antiquewhite;
text-align: center;
}
#presentation{
display: inline-block;
text-align: center;
}
#tabela{
display: inline-block;
width: 40%;
margin: 10px;
padding: 25px;
border: 2px solid #e4d8ba;
border-radius: 8px;
border-collapse: collapse;
}
#tabela tbody {
}
#tabela th, td {
padding: 15px;
text-align: left;
border-top: 2px solid #e4d8ba;
}
.top{
border: none;
}
<div id="present-containter">
<div id="presentation">
<table id="tabela">
<tr><td class="top">Nearby</td><td class="top"><li>Beach: 500 meters (Pebble)</li><li>Restaurant: 1 km</li><li>Market: 200 meters</li></td></tr>
<tr><td>Included in price</td><td><li>Bedlinen including towels</li><li>Final Cleaning</li><li>Consumption costs</li></td></tr>
<tr><td>other</td><td><li>free WiFi</li><li>pets not allowed</li></td></tr>
</table>
</div>
</div>
Check this image:
How can I center the table body or table columns within the table while keeping text-align: left.
If I'm understanding correctly you're looking for something like this. Also went and cleaned up your syntax which wasn't valid in many ways but hope this helps, cheers.
#present-container {
border: 2px solid #e4d8ba;
border-radius: 8px;
background-color: antiquewhite;
margin: 0 auto;
}
#tabela {
padding: 25px;
border-collapse: collapse;
margin: 10px auto;
}
#tabela tr:not(:last-child) {
border-bottom: 2px solid #e4d8ba;
}
#tabela td {
padding: 15px;
}
<div id="present-container">
<table id="tabela">
<tbody>
<tr>
<td>
Nearby
</td>
<td>
<ul>
<li>Beach: 500 meters (Pebble)</li>
<li>Restaurant: 1 km</li>
<li>Market: 200 meters</li>
</ul>
</td>
</tr>
<tr>
<td>
Included in price
</td>
<td>
<ul>
<li>Bedlinen including towels</li>
<li>Final Cleaning</li>
<li>Consumption costs</li>
</ul>
</td>
</tr>
<tr>
<td>
other
</td>
<td>
<ul>
<li>free WiFi</li>
<li>pets not allowed</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

CSS Navigation Vertical Align

I am unaware of the best practice to get my desired result. I have used tables here which have got me close to what I want.
The result doesn't have vertically centered text and I cannot figure out how. Tried using UL to get this but had no luck:
#hotspotbg table {
margin-top: 1px;
}
#hotspotbg table tr td {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
#hotspotbg table tr td a {
text-align: center;
text-decoration: none;
display: block;
font-family: Tahoma, Geneva, sans-serif;
color: #fff;
height: 51px;
}
#hotspotbg table tr td a:hover {
background: #FFF;
color: #000;
}
<table width="900" height="51px" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="25%" height="51" valign="middle">Home
</td>
<td width="25%">Products
</td>
<td width="25%">Reviews
</td>
<td width="25%">Contact
</td>
</tr>
</table>
Setting the line-height of the child (a element in your case) to the height of the parent, will vertically align the text of the a element. See below for more information.
.wrapper {
height: 70px;
width: 100%;
background: red;
overflow: hidden;
}
.wrapper a {
/*NOT AFFECTING THE VERTICAL ALIGN*/
display: block;
float: left;
height: 70px;
width: 50%;
color: #fff;
text-align: center;
/*AFFECTING VERTICAL ALIGN*/
line-height: 70px;
}
<div class="wrapper">
test
nice
</div>

HTML div in the cell - stretch, positioning etc

Have read a lot and even able to make some of this now, but not together ) Please help.
I need th that contains the caption and the "icon" that consists of one char. And I need caption to be aligned left and icon - right. In the same th. ANd they both must be in the middle of the cell vertically. And icon should be in the center/middle of the div as well. Please help. I cannot align caption and cannot align icon in their div. Dunno why, looks like html/css were invented by aliens, I don't understand that logic and how it was possible to make such a simple thing so stupidly complicated )
Here's the screenshot of what I need
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: center;
vertical-align: middle;
display: table-cell;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
vertical-align: middle;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 1px solid #7f9;
}
div.right
{
text-align: center;
vertical-align: middle;
position: relative;
height: 2em;
border: 1px solid #f79;
display: inline-block;
float: right;
width: 2em;
}
div.reload
{
border: 1px solid #79f;
text-align: center;
vertical-align: middle;
width: 2em;
height: 2em;
position: absolute;
right: 0;
bottom: 0;
display: table;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Have found an answer (based on your advices, thank you!!!)
That was easy and still dumb:)
table
{
border-collapse: collapse;
border-spacing: 0;
}
th
{
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
text-align: left;
vdrtical-align: middle;
line-height: 2em;
}
td
{
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
}
div.left
{
display: inline-block;
text-align: left;
vertical-align: middle;
border: 0px solid #7f9;
display: inline-block;
float: left;
}
div.reload
{
border: 1px solid #999;
text-align: center;
vertical-align: middle;
width: 1.5em;
margin: 0.2em;
line-height: 1.5em;
right: 0;
bottom: 0;
display: inline-block;
float: right;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="reload">⟳</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="reload">⟳</div>
</th>
</tr>
<tr>
<td colspan=2>
Some data
</td>
<td colspan=2>
123.45
</td>
</tr>
</table>
Maybe something like this ?
CSS:
.view-table
{
display:table;
width:100%;
}
.view-row
{
display:table-row;
}
.view-row > div
{
display: table-cell;
}
.left
{
text-align:left;
background-color: lightblue;
}
.right
{
text-align:right;
background-color: pink;
}
HTML :
<div class="view-table">
<div class="view-row">
<div class="left">Title</div>
<div class="right">⟳</div>
</div>
</div>
If you want the icon on the right side of the th and the title on the left, you need text-align-last:justify instead of text-align:center in the th.
Please note that you also need another text-align-last on the div.reload, else its text-align will have no effect!
table {
border-collapse: collapse;
border-spacing: 0;
}
th {
border: 1px solid #fff;
white-space: nowrap;
background: #000;
color: #fff;
padding: 0.5em;
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
td {
border: 1px solid #fff;
white-space: nowrap;
background: #eee;
width: 20em;
padding: 0.5em;
text-align: center;
}
div.left {
display: inline-block;
vertical-align: middle;
text-align: left;
border: 1px solid #7f9;
}
div.right {
display: inline-block;
border: 1px solid #f79;
display: inline-block;
}
div.reload {
border: 1px solid #79f;
width: 2em;
line-height: 2em;
text-align: center;
-moz-text-align-last: center;
text-align-last: center;
}
<table>
<tr>
<th>
<div class="left">Title 1</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
<th>
<div class="left">Title 2</div>
<div class="right">
<div class="reload">⟳</div>
</div>
</th>
</tr>
<tr>
<td>
Some data
</td>
<td>
123.45
</td>
</tr>
</table>
Or, this fiddle.

How to add a <hr> to the top of a <td> while keeping the content centered?

I tried to add a horizontal line inside a <td> tag to achieve :
but this is what I got :
Here is a jsfiddle: http://jsfiddle.net/6qybn8w8/
Please note that I want this <hr /> tag to appear in only few of the <td> and not all. Also, I cannot remove the padding for <td> as I need it to format content of other <td>s
You can do some thing like this.
table {
border: 3px solid #0D94D2;
}
table th,
td {
padding: 4px 10px 4px 5px;
font-size: 12px;
}
table th {
background-color: #0D94D2;
text-align: center;
padding: 0.25em 0.25em;
white-space: nowrap;
}
table td {
width: auto;
text-align: center;
border-bottom: 1px solid #B1DCEA;
white-space: nowrap;
}
hr {
position: relative;
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
width: 118.9%;
left: -6.5%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
One workaround for you to get the expected result without breaking your structure is by using positioning.
Well I've updated the fiddle so you can go through the changes, http://jsfiddle.net/6qybn8w8/2/
HTML:
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
CSS
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}
table td div{
margin-top:10px;
}
hr{
color: #0000FF;
background-color: #0000FF;
height: 0.75em;
position:absolute;
width:100%;
top:-10px;
left:-1px;
}
Set the height of <hr> as 0 and add margin-top to 5px or whatever that you want.
table{
border:3px solid #0D94D2;
}
table th,td{
padding: 4px 10px 4px 5px; font-size: 12px;
}
table th{
background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}
hr{
height: 0em;
border-top: 5px solid green;
margin: 0;
width: 100%;
}
<body>
<table>
<th>
Data
</th>
<tr>
<td>
<hr />
<div>
Some Gibber Gabber
</div>
</td>
</tr>
</table>
</body>
Updated jsFiddle: http://jsfiddle.net/rdesai/6qybn8w8/5/