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>
Related
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
I have a page which has other sub-tables inside one big table that divides the whole page into 2 parts. My question is how can I change position of all elements inside td tags in order to look it nice? The result I have now is here:
Current result with no position formatting
I want it to look like like this:
The way it's supposed to look
I've tried to do it with CSS formatting using relative position feature like this
.leftSide
{
position: relative;
bottom:250px;
}
And it works so well, but when I zoom in- zoom out this page in the browser it becomes a one big mess(elements by default in the middle of td tag, but then I do it, elements are out of the table). How can I avoid it?
My whole code below:
.splitTable {
width: 100%;
height: 100%;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
border-collapse: collapse;
width: 30%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
position: relative;
bottom: 250px;
}
.rightSide {
position: relative;
bottom: 250px;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest" width="25%">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Hope, this helps :)
.splitTable {
width: 100%;
height: 100vh;
border: 6px solid #05788D;
border-collapse: collapse;
}
.sides {
border: 6px solid #05788D;
position: relative;
width: 50%;
}
.sideForSSRSSTables {
border: 3px solid #05788D;
}
.partsTable {
height: 7%;
width: 95%;
margin-top:30px;
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
.leftSide {
display: flex;
flex-direction:flex-end;
position: absolute;
top: 20px;
width:90%;
left:50%;
transform:translateX(-50%);
}
.leftSide>* {
flex: 1;
}
.SSRSSObjectCostTableTest {
border: 3px solid #05788D;
margin: 5px;
border-collapse: collapse;
}
.rightSide {
position: absolute;
top: 20px;
left:50%;
transform:translateX(-50%);
width:90%;
}
.addButton {
float:right;
margin-right:5%;
}
<table class="splitTable">
<tr>
<td class="sides">
<div class="leftSide">
<span class="chooseText">Choose</span>
<table class="SSRSSObjectCostTableTest">
<tr>
<td class="sideForSSRSSTables">Say this is 1st element</td>
<td class="sideForSSRSSTables">Say this is 2nd element</td>
</tr>
</table>
</div>
</td>
<td class="sides">
<div class="rightSide">
<span class="partsText">Parts</span>
<button type="button" class="addButton">+Add Part</button>
<!--<table class="outerPartTable">-->
<table class="partsTable">
<td class="sideForPartsTable" width="5%">Expand button</td>
<td class="sideForPartsTable">Title + sum1 + sum2</td>
<td class="sideForPartsTable" width="5%">edit</td>
<td class="sideForPartsTable" width="5%">remove</td>
</table>
<!--</table>-->
</div>
</td>
</tr>
</table>
Am trying to get rid of a space in my divs that look like this and if i try pushing the image up it work but the containers height wont change is there anyway to fix it i mean to make them align in the same position?
HTMl
<div class="addtocart-holder shadow">
<div class="cart-img"> <img src="img/product4.jpg"> </div>
<div class="cart-image-details">
<div class="cart-item-name"> <h3> Feather Dress With Embellished Lace Top</h3> </div>
<div class="cart-item-details"> <table>
<tr>
<td>Price Before:</td>
<td class="old">$200</td>
</tr>
<tr>
<td>Price: </td>
<td>$100</td>
</tr>
<tr>
<td>You Saved:</td>
<td class="saved">$100</td>
</tr>
<tr>
<td>Shippment :</td>
<td class="free">Free</td>
</tr>
</table> </div>
<div class="cart-item-add"> <table>
<tr>
<td>Quantity:</td>
<td class="old"><input type="text" class="form-control" value="1" /></td>
</tr>
<tr>
<td></td>
<td><div class="buy-ico"> Add To Cart</div></td>
</tr>
</table> </div>
</div>
CSS
.addtocart-holder{
min-width: 700px;
margin-top:100px;
padding:5px;
backround: #fff;
}
.cart-img, .cart-image-details{
border:1px solid #f00;
display: inline-block;
position: relative;
}
.cart-img{
height:190px;
width:26%;
}
.cart-img img{
width:100%;
height:100%;
}
.cart-image-details{
width:73%;
}
.cart-item-name{
width:100%;
text-align: center;
}
h3{
text-decoration: none;
text-align:center;
margin: 5px 0;
color:#888;
font: italic normal 17px georgia;
font-style: italic;
}
.cart-item-details, .cart-item-add{
width:49%;
border:1px solid #000;
display: inline-block;
}
table{
border:1px solid #fff;
width: 100%;
color: #888;
}
td{
padding:4px;
font-size:16px;
font-weight:500;
}
.shadow{
height: auto !important;
-webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.31);
-moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.31);
box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.31);
}
You have to set vertical-align property of .cart-image-details to top.
.cart-image-details {
vertical-align: top;
}
Fiddle: http://jsfiddle.net/u9mtyjoe/
The initial value of vertical-align is baseline, so changing to top will help you align divs properly.
Reference: MDN
I am seeking for better way to arrange my borders.
Currently I have something like this, but I feel there must be some better and quick solution to this.
My Code:
<style>
td.left{
border-top-style:solid;
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right{
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown{
border-top-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.left2{
border-left-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.right2{
border-right-style:solid;
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.updown2{
border-bottom-style:solid;
border-color: black;
border-width: 1px;
}
td.finish{
border-bottom-style: solid;
border-left-style: solid;
border-right-style: solid;
border-color: black;
border-width: 1px;
}
table {
border-style:none;
padding:1px;
margin:0px;
border-spacing: 0px;
border: 0pxborder: ;
width:850px;
}
</style>
I have created classes with each specific side to be displayed for each different purposes.
Here is the body part of the code, I have used class "left" for 1st row and "left2" for 2nd row, this is due to if I use both rows with "left" then second row will have thicker line between 1st row and 2nd row.
In this table I want to make lines between a specific column to disappear or appear but struggling to find shorter code to do so.
<table>
<tbody>
<tr>
<td width="149" class="left"> For testing 1</td>
<td width="312" class="updown"><input type="text" /></td>
<td width="172" class="left"> For testing 2</td>
<td width="204" class="right"> <input type="text" /></td>
</tr>
<tr>
<td class="left2">For testing 3</td>
<td class="right2" colspan="3"><input type="text" /></td>
</tr>
<tr>
<td class="left2" colspan="2">For testing 4</td>
<td class="finish" colspan="2"><input type="text" /></td>
</tr>
</tbody>
</table>
Here is a character-saving solution with border-collapse: collapse;
LIVE DEMO
HTML:
<table>
<tbody>
<tr>
<td><span>For testing 1</span><input type="text" /></td>
<td><span>For testing 2</span><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><span>For testing 3</span><input type="text" /></td>
</tr>
<tr>
<td><span>For testing 4</span></td>
<td><input type="text" /></td>
</tr>
</tbody>
</table>
CSS:
td {
border: 1px solid black;
border-collapse: collapse;
}
table {
border: 1px solid black;
border-collapse: collapse;
width: 850px;
}
span {
float: left;
width: 150px;
}
What you could do is this:
td {
border:1px solid black;
}
td.left{
border-right-style:none;
}
td.right{
border-left:none;
}
td.updown{
border-left:none;
border-right:none;
}
td.left2{
border-top:none;
border-right:none;
}
td.right2{
border-left:none;
border-top:none;
}
td.updown2{
border-top:none;
border-left:none;
border-right:none;
}
td.finish{
border-top:none;
}
See: http://jsfiddle.net/Cuyxh/
However, I would suggest using classes for each border in your HTML, for a more modular approach.
Example:
b-left, b-right, b-top, b-down {
border-color:black;
border-width:1px;
}
b-left {
border-left-style:solid;
}
b-top {
border-top-style:solid;
}
b-right {
border-right-style:solid;
}
b-bottom {
border-bottom-style:solid;
}
And then adding these classes to your table cells. For example:
<td width="149" class="b-left b-top">For testing 1</td>
I'm new to html and I'm trying to create tables and style them but they are not styled as I'd like: http://jsfiddle.net/DpLy5/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tabeller</title>
<style>
body{
padding-top: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</tr>
</table>
</body>
</html>
The middle row first column should be 150px wide but its bigger then that. I don't know what it could be. Any help? Thank you
You need to add a colspan='3' on your first and third row tr. As you have it set to 700px and it's a single column it will push the one above/below it to the same:
http://jsfiddle.net/spacebean/DpLy5/1/
<table style="border: 1px solid black;">
<tr>
<td style="width: 700px; height:150px; border: 1px solid black;" colspan='3'>
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;" colspan='3'></td>
</tr>
</table>
Also, I highly suggest using non-inline styling as it will make it a lot easier to see what you are doing and separate style from content.
http://jsfiddle.net/spacebean/DpLy5/8/
<table class='myTable'>
<thead>
<tr>
<th colspan='3'>
<img src="http://placehold.it/700x150" />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>adad</td>
<td class='main'>adad</td>
<td>adad</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='3'></td>
</tr>
</tfoot>
</table>
css:
.myTable {
width: 700px;
}
.myTable td, .myTable th {
border: solid 1px black;
}
.myTable thead th {
height:150px;
}
.myTable tbody td {
width: 150px;
height:700px;
background-color: #808080;
}
.myTable tbody td.main {
width: 400px;
background-color: #fff;
}
.myTable tfoot td {
height:75px;
background-color: #808080;
}
Make the td in the first tr span the three columns using colspan="3" similar to the td in the last tr.
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
JS Fiddle: http://jsfiddle.net/DpLy5/3/
you will need to add colspan="3" to in first row & last row... that's it.
http://jsfiddle.net/DpLy5/6/
<table style="border: 1px solid black;">
<tr>
<td colspan="3" style="width: 700px; height:150px; border: 1px solid black;">
<img src="http://placehold.it/700x150">
</td>
</tr>
<tr>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
<td style="width: 400px; height:700px; border: 1px solid black;">adad</td>
<td style="width: 150px; height:700px; border: 1px solid black; background-color: #808080;">adad</td>
</tr>
<tr>
<td colspan="3" style="width: 700px; height:75px; border: 1px solid black; background-color: #808080;"></td>
</table>
You are in need of the colspan attribute. The colspan attribute in fact says "Let me span this amount of column in the table".
Which means colspan="3" is translated to "Let me span 3 columns in the table"
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span
However, according to your JSFiddle, you are trying to make a raster for your layout. Achieving this with the use of table's is a no-go, it's a major bad practice.
This is because a table is something where you put data in, and an entire layout is not data.
The best way to set up and layout is using Div's. http://www.w3schools.com/html/html_layout.asp