I'm using tables for my website layout, and I want to divide one table into two, but having both the tables in the same column. (Specifically, one being 300px and the other being 200). I cannot figure out how to do this.
Here's the code I'm currently using:
<style>
.menuleft {
background:white;
width:17%;
height:500px;
padding: 10px;
border-radius:12px 0px 0px 12px;
border:1px dashed pink;
}
.menuright {
background:white;
width:17%;
height:500px;
padding: 10px;
border-radius:0px 12px 12px 0px;
border:1px dashed pink;
}
.maintable {
background:white;
border: 1px dashed pink;
padding: 10px;
height:500px;
width:60%;
}
</style>
<tr>
<td colspan = "2" height="100px">
title
</td>
</tr>
<tr valign="top" class="main">
<td class="menuleft">
</td>
<td class="maintable">
</td>
<td class="menuright">
</td>
</tr>
your description is not really clear, but as far as I understand if you want to divide rows or columns you simply use colspan and rowspan.
check this link for more infos
Related
I am using the following plugin.
https://github.com/dabeng/OrgChart.
In some resolution, the vertical line is not fitting properly.
https://github.com/dabeng/OrgChart/issues/410
I have analysed the rendered html and tried with the same code.
I am getting the same issue for some resolutions.
Please see the following fiddler.
.downline{
height:30px;
width:2px;
background:red;
text-align:center;
background: red;
text-align: center;
background-color: rgba(217, 83, 79, 0.8);
margin: 0px auto;
height: 55px;
width: 2px;
float: none;
}
.leftLine{
border-right:1px solid green;
}
.rightLine{
border-left:1px solid green;
}
table{
margin:50px;
border-spacing: 0 !important;
border-collapse: separate !important;
}
.item{
padding:5px;
border:1px solid black;
}
<table>
<tr>
<td colspan="2">
<div class="downline">
</div>
</td>
</tr>
<tr>
<td class="leftLine">
</td>
<td class="rightLine">
</td>
</tr>
<tr>
<td colspan="2" >
<div class="item">
Test 123
</div>
</td>
</tr>
</table>
I'm trying to make a 2x5 table with a large image taking up the left most five cells and 5 links taking up the rightmost ones. I am having trouble fitting the table to the image.
I'd like the table to be a single rectangle in the end but currently the table is bigger than the image inside of it. Also, is there any way to do this just using CSS (no JS)?
Thank you in advance.
Here is jsfiddle: https://jsfiddle.net/3ktLpcmx/2/
and code:
HTML:
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td rowspan="5"><img style="display: block;" src="http://wallpapercave.com/wp/ckdySrm.png" width="500" /></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
</tr>
<tr>
<td class="linktd">mmmmmmm hm mmmmm</td>
</tr>
<tr>
<td class="linktd">Hmmm, mmmhmmmm</td>
</tr>
</table>
CSS:
body {
text-align: center;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
EDIT:
Things I have tried include removing the padding on the links, setting table height to auto (then links don't fill their cells), setting table to 375px (size of image), setting table to 376px, and setting the link-tds to 20% of table.
I do not think a table is needed here. nav could do for a menu .
display:flex will help size, align, grow and center things.
nav,
nav span,
nav span a {
display: flex;
}
nav span {
flex-flow: column;
}
a {
flex: 1;
width: 165px;
justify-content: center;
align-items: center;
background-color: #58809d;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
a:hover {
background-color: #282969;
}
nav img {
display: block;
}
<nav>
<img src="http://wallpapercave.com/wp/ckdySrm.png" width="500" />
<span>
Mmmmmhmmm
hmmmhhhhhmmm
MMMM MMMM!
mmmmmmm hm mmmmm
Hmmm, mmmhmmmm
</span>
</nav>
J.Joe, Your answer works well and is clever. Thank you.
<table style="height:376px; width:600px; border-spacing:0px; padding:0px; border-collapse:collapse; border:none;" cellspacing=0 cellpadding=0>
<tr>
<td class = "test" rowspan="5"></td>
<td class="linktd">Mmmmmhmmm</td>
</tr>
<tr>
<td class="linktd">hmmmhhhhhmmm</td>
</tr>
<tr>
<td class="linktd" >MMMM MMMM!</td>
and
body {
text-align: center;
}
.test{
background-color: #cccccc;
background-image:url('http://wallpapercave.com/wp/ckdySrm.png');
background-size:cover;
}
.linktd {
background-color: #58809d;
text-align:center;
vertical-align:middle;
width: 165px;
height:20%;
}
.linktd:hover {
background-color: #282969;
}
.homelink {
/*margin-bottom: 10px;*/
padding: 15px 10px 10px 10px;
width: 165px;
height:100%;
display:inline-block;
background-color:#58809d;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}
.homelink:hover {
background-color:#282969;
}
I cannot get a table row data (td) to decrease it's width. The problem is that the avatar td seems to take up the majority of the entire row. I need the text with Traveler column to move to the left as shown
Here is the current progress of what I have:
This is what it's supposed to look like.
If you look, the gray container has text on the right side and text that should be directly next to the avatar image
There is an established two columns of text (that row is 3 table cells long) The problem is that one of my td's has a width that is causing the column starting with Traveler to be pushed so far right.
So here's my HTML:
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td width="60px"><img class="avatar" src="/avatar/35274"/></td>
<td>Traveler<br>posted on 15 May, 2008</td>
<td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
</tr>
<tr class="reviewuserdata">
<td style="width:100%" colspan="3">
<table cellpadding="0" cellspacing="0" class="reviewchart">
<tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
<tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
<tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
<tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
<tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
<tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
<tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
And finally here's my CSS:
#CHARSET "UTF-8";
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px 0px 10px 10px;
display: inline-block;
vertical-align: middle;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
vertical-align: top;
}
#reviews table td h2 {
position:relative;
display:inline-block;
white-space:nowrap;
font:24px/24px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
/**padding-top:20px;*/
/**padding-left:20px;*/
}
#reviews table td h2 img.stars {
position:absolute;
margin-left:10px;
display:inline-block;
}
#reviews table td h2 span.rating{
position:absolute;
margin-left:145px;
display:inline-block;
color:#e85a06;
font-weight:bold;
}
table.reviewchart {
position:relative;
display:inline-block;
white-space:nowrap;
border-collapse: collapse;
font:14px/14px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
padding-top:20px;
padding-left:20px;
}
table.reviewchart td.reviewlabel{
/**padding-top:15px;*/
padding-bottom:15px;
}
UPDATE
Ok so i was able to fix the width position for the text by adding a colspan of 3 however the word Traveler is pushed to the right still. I tried setting margins and paddings but that did not work.
Here is my current progress:
Late to the party, but yes, colspan="3" is needed. Then, what you can do is add width="1%" to the cell with the image and update your css to have margin: 10px; instead of margin: 10px 0 10px 10px; for the image. That should fix it.
.page {
position: relative;
background-color: #ffffff;
width: 1200px;
margin: 0px auto;
box-sizing: border-box;
border-left: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
}
table {
border:0px;
width:100%
}
table.reviewsouter .reviewleft{
width:800px
}
table.reviewsouter .reviewright{
width:400px
}
#reviewspotlight {
position: relative;
background-color:#000000;
height:111px;
z-index:19997;
font-family: DinWebCond, Sans-serif;
color:#ffffff;
}
#reviews {
position: relative;
background-color:#ffffff;
color:#000000;
border-right:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo {
background-color:#f0f0f0;
height:60px;
border-left:1px solid #d0d0d0;
}
#reviews table tr.reviewuserinfo img.avatar{
position:relative;
width:40px;
height:40px;
margin:10px;
display: inline-block;
vertical-align: middle;
}
#reviews table tr.reviewuserinfo div {
display:block
}
#reviews table tr.reviewuserdata {
background-color:#ffffff;
height: 315px;
border-left:1px solid #ffffff;
vertical-align: top;
}
#reviews table td h2 {
position:relative;
display:inline-block;
white-space:nowrap;
font:24px/24px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
/**padding-top:20px;*/
/**padding-left:20px;*/
}
#reviews table td h2 img.stars {
position:absolute;
margin-left:10px;
display:inline-block;
}
#reviews table td h2 span.rating{
position:absolute;
margin-left:145px;
display:inline-block;
color:#e85a06;
font-weight:bold;
}
table.reviewchart {
position:relative;
display:inline-block;
white-space:nowrap;
border-collapse: collapse;
font:14px/14px DinWebCond,Sans-serif;
margin:0px;
text-transform:uppercase;
/**padding:20px 0px 9px 15px;*/
padding-top:20px;
padding-left:20px;
}
table.reviewchart td.reviewlabel{
/**padding-top:15px;*/
padding-bottom:15px;
}
<div id="reviews">
<table cellpadding="0" cellspacing="0">
<tr class="reviewuserinfo">
<td width="1%"><img class="avatar" src="/avatar/35274"/></td>
<td>Traveler<br>posted on 15 May, 2008</td>
<td align="right" style="padding-right:15px">Joined 2 years ago<br>12 reviews and 49 comments posted</td>
</tr>
<tr class="reviewuserdata">
<td style="width:100%" colspan="3">
<table cellpadding="0" cellspacing="0" class="reviewchart">
<tr><td><h2>Overall Rating <img class="stars" src="/stars/3.9/large" /> <span class="rating">4.5</span></h2></td></tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0">
<tr><td class="reviewlabel" style="padding-top:15px">QUALITY OF THE DANCERS</td></tr>
<tr><td class="reviewlabel">PRIVATE DANCES, VALUE FOR MONEY</td></tr>
<tr><td class="reviewlabel">OVERALL HOSPITALITY</td></tr>
<tr><td class="reviewlabel">GUEST TO DANCER RATIO</td></tr>
<tr><td class="reviewlabel">VARIETY OF DANCERS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, COVER CHARGE</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, DRINKS</td></tr>
<tr><td class="reviewlabel">VALUE FOR MONEY, FOOD</td></tr>
<tr><td class="reviewlabel">OVERALL ATMOSPHERE</td></tr>
<tr><td class="reviewlabel">SOUND SYSTEM AND DJ</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
Everything after the column with the image is one big column . You're telling it to alight right so it's moving everything to the very right of that column. remove this or make it align="left" and it should fix your issue.
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/
My layout so far for the site is as follows:
HTML
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
some more stuff here
</tbody>
</table>
CSS
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
font-weight:bold;
padding:0px;
position:relative;
text-align:center;
}
I would align the tabArea div to that it is flush on the left with the centered table. I am using text-align to center. However, the centers the div on the whole page. Moreover, if I align to the left, then it will go all the way to the left. How do I achieve this?
You'll want to use the <tr> and <td> tag when working with <tbody>, otherwise it "throws" the text out of table. For the tabArea to align correctly (to the outer left corner of the table), you'll've to put all of the content in a container. Try this:
<div id="container">
<div class="tabArea"> some more code</div>
<table class="tablesorter">
<tbody>
<tr>
<td>some more stuff here</td>
</tr>
</tbody>
</table>
</div>
.tablesorter {
font-family:sans-serif;
border-radius: 10px;
padding: 0 10px 0 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
#container { margin: 0 auto; width: 750px;}
.tabArea { font-weight:bold; text-align: left;}
Hope this helps.
Here is the solution:
http://jsfiddle.net/pgxh6r31/
<div class="tabArea">
some more code
</div>
<table class="tablesorter">
<tbody>
<tr>
<td>
some more stuff here
</td>
</tr>
</tbody>
</table>
table.tablesorter{
margin:0px auto 0px;
font-family:sans-serif;
border-radius: 10px;
padding-right: 10px;
padding-left: 10px;
background-color: #F5F5F5;
width:750px;
height:400px;
}
div.tabArea {
width: 750px;
font-weight:bold;
padding:0px;
position:relative;
margin: auto;
border: 1px solid black;
}
table td {
border : 1px solid black;
}