I am creating a form with table in Mailchimp Advanced mode. I can't divide the 2 columns 50% - 50%. I don't know why the left column takes more space than the right.
.formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
margin: 22px;
padding: 10 15 10 15;
width: auto;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
padding: 5 5 15 5;
margin-left: auto;
margin-right: auto;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #FFFFFF;
font-family: verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
}
input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
<tr>
<td align="left" class="formLabel">Anrede <span class="req asterisk">*</span>
<br>
<div class="interestgroup_field radio-group" id="MERGE3">
<label class="radio" for="MERGE3-0">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label>
<label class="radio" for="MERGE3-1">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label>
<label class="radio" for="MERGE3-2">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label>
</div>
<br>
<div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br>
<div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br>
<div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position
<br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br>
<div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br>
<div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
There are two things wrong with this code
You are missing the code to start and end a table <table width="100%" border="0" cellspacing="0" cellpadding="0"> and </table>
Your HTML closes before the the style tags.
Fix those two things and your form takes shape.
<html>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" class="formLabel">Anrede <span class="req asterisk">*</span><br>
<div class="interestgroup_field radio-group" id="MERGE3"> <label class="radio" for="MERGE3-0"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label><label class="radio" for="MERGE3-1"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label><label class="radio" for="MERGE3-2"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label> </div>
<br><div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br> <div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br> <div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position <br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br> <div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span><br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br> <div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
</tr>
</table>
<style> .formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
/*margin: 22px;
padding: 10 15 10 15;*/
width: auto;
border:1px solid #000000;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
/*padding: 5 5 15 5;*/
margin-left: auto;
margin-right: auto;
} ul,
li {
margin: 0;
padding: 0;
list-style: none;
} body {
background-color: #FFFFFF;
font-family:verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
} input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
</style></html>
Let me know if this is what you were after.
Related
I would like to draw the following in my web page:
where the three buttons are submit buttons.
I managed to do most but having a problem drawing the vertical lines.
here is my code:
th,
td {
padding: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 50px 0;
}
span {
border-bottom: 2px solid gray;
border-right: 2px solid gray;
padding: 2px;
display: inline-block;
width: 100%;
}
.button {
width: 100%;
padding: 10px;
font: bold;
font-size: 20px;
border: none;
}
.button_blue {
background-color: LightSkyBlue;
}
.button_red {
background-color: OrangeRed;
}
.button_yellow {
background-color: yellow;
}
.boxed {
width: 600px;
border: 3px solid green;
padding: 5px;
margin: 5px;
margin-left: auto;
margin-right: auto;
}
.circle {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 30px;
font: bold;
text-align: center;
display: inline-block;
;
}
<div style="text-align:center">
<u style="color:Red;">
<h1 style="color:DodgerBlue;font-size:3em;">
Hashi
</h1>
</u>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p></p>
<div style="text-align:center">
<p></p>
<table class="center">
<tr>
<td></td>
<td style="border-bottom:4px solid black"></td>
</tr>
<tr>
<td style="text-align:center"><text style="color:DodgerBlue;font-size: 2em;"> Build bridges </text></td>
<td>
<span> {{ form.create(class_="button button_blue") }} </span>
</td>
</tr>
<tr>
<td style="text-decoration: line-through; text-decoration-thickness:5px;">
<div class="circle" style="background-color:yellow;">
3
</div>
<div class="circle" style="background-color:OrangeRed;">
2
</div>
<div class="circle" style="background-color:lightgreen;">
5
</div>
</td>
<td>
<span>{{ form.load(class_="button button_red") }}</span>
</td>
</tr>
<tr>
<td>
<div class="circle" style="background-color:blue;color:yellow;">
4
</div>
</td>
<td>
<span>{{ form.solve(class_="button button_yellow") }}</span>
</td>
</tr>
</table>
</div>
</form>
</div>
You shouldn't use tables to do design, but if that's what you want, then I will come up with a solution for it.
Don't use inline styles. Refactor them to classes, so the HTML is readable.
Set position: relative on all TDs.
Place each element in a TD of its own.
Make the circular buttons absolute to position them on top of bottom right corner.
Use colspan to place the elements relative to each other.
Use border to draw the lines.
/** UNCOMMENT TO REVEAL THE ENTIRE STRUCTURE OF THE TABLE **/
/*td {
border: 2px solid rgba(0, 0, 0, 0.3) !important;
}*/
body {
font-family: Helvetica;
}
h1 {
color: DodgerBlue;
font-size: 4em;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 1px;
margin: 2rem auto 1rem;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: 1rem;
}
td.subtitle {
color: DodgerBlue;
font-size: 3em;
padding: 1rem;
}
td {
position: relative;
text-align: center;
border: 4px none black;
}
td.right-line {
border-right-style: solid;
}
td.bottom-line {
border-bottom-style: solid;
}
td.double-stroke {
border-width: 4px;
border-style: solid;
}
button {
display: flex;
justify-content: center;
align-items: center;
}
button.big {
margin: 1rem;
padding: 1rem 2rem;
font-size: 1.3rem;
width: calc(100% - 2rem);
box-sizing: border-box;
}
button.circle {
position: absolute;
right: 0px;
bottom: 0px;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 1.1rem;
font-weight: bold;
}
.blue.big {
background-color: LightSkyBlue;
}
.red {
background-color: OrangeRed;
}
.yellow {
background-color: yellow;
}
.lightgreen.circle {
background-color: lightgreen;
}
.blue.circle {
background-color: blue;
color:yellow;
}
<form action="" method="post" novalidate>
<table>
<tr>
<td colspan="4"></td>
<td class="bottom-line"><h1>Hashi</h1></td>
</tr>
<tr>
<td> </td>
<td colspan="3" class="subtitle right-line">Build bridges</td>
<td><button class="blue big">Create a Puzzle</button></td>
</tr>
<tr>
<td><button class="yellow circle">3</button></td>
<td class="bottom-line"><button class="red circle">2</button></td>
<td class="bottom-line right-line" colspan="2"><button class="lightgreen circle">5</button></td>
<td><button class="red big">Upload External</button></td>
</tr>
<tr>
<td class="right-line double-stroke"><button class="blue circle">4</button></td>
<td colspan="3"> </td>
<td><button class="yellow big">Run Internal</button></td>
</tr>
</table>
</form>
Basically right now I have everything in a straight line, I know it isn't responsive, not part of the task. I want to change it so I have 'clock hours, incentive, off clock, and regular hours' on the top row & overtime hrs, personal, vacation, and holiday' directly beneath it. And then have total hours off to the side near the signature area. I have some thoughts on how to do it but I feel like it could be done in a simple way so I don't know exactly the best way of tackling it.
/* *{
margin: 0;
padding: 0;
} */
/* #page {
size: 8.5in 11in;
} */
h2 {
text-align: center;
}
.signandauth {
/*div for authorized, signature & their textboxes*/
position: absolute;
top: 0;
right: 0;
margin-right: 20px;
margin-top: 20px;
}
.dateSection {
/*div for date script*/
position: absolute;
top: 0;
left: 0;
margin-left: 20px;
margin-bottom: 20px;
margin-top: 65px;
}
.section1 {
padding: 30px 0;
border: 4px solid black;
/* margin-right: 20px; */
}
.section2 {
padding: 70px 0;
border: 4px solid black;
}
label {
border: 1px solid black;
padding: 0.2em;
margin: 0.2em;
display: inline;
}
p {
margin: 0.3em;
padding: 0.3em;
font-weight: bold;
display: inline;
text-align: center;
}
#date {
float: left;
}
#authorized {
/*text box*/
width: 170px;
height: 30px;
float: right;
}
#authorizeP {
/*the label*/
float: right;
}
#signature {
width: 170px;
height: 30px;
float: right;
}
#signP {
float: right;
}
table,
th {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
float: right;
}
td {
width: 90px;
border: 1px solid black;
padding: 5px;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<body>
<title>Time Card</title>
<div class="section1">
<h2>Time Card: AWS</h2>
<div class="dateSection">
<p id="date"></p>
<script>
var date = new Date();
document.getElementById("date").innerHTML = date.toDateString();
</script>
</div>
<br>
<br>
<br>
<p>Clock Hours</p>
<label id="clockHours">0.00</label>
<p>Incentive</p>
<label id="Incentive">0.00</label>
<p>Off Clock</p>
<label id="offClock">0.00</label>
<p>Regular Hours</p>
<label id="regularHours">0.00</label>
<p>Overtime Hours</p>
<label id="overtimeHours">0.00</label>
<p>Total Hours</p>
<label id="totalHours">0.00</label>
<p>Personal</p>
<label id="personal">0.00</label>
<p>Vacation</p>
<label id="vacation">0.00</label>
<p>Holiday</p>
<label id="holiday">0.00</label>
<div class="signandauth">
<p id="authorizeP">Authorized</p>
<br>
<br>
<label id="authorized"></label>
<br>
<br>
<br>
<p id="signP">Employee Signature</p>
<br>
<label id="signature"></label>
</div>
</div>
<br>
<!-- --------------------------------------------------------------------------------------------- -->
<div class="section2">
<table>
<tr>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
<td>000</td>
</tr>
</table>
</div>
</body>
</html>
How about putting them in a 2x4 table?
<br>
will break onto a new line, that should do what you're hoping.
<table >
<tr>
<th>Clock Hours</th>
<th>Incentive</th>
<th>Off Clock</th>
<th>Regular Hours</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
<br>
<table >
<tr>
<th>Overtime Hours</th>
<th>Personal</th>
<th>Vacation</th>
<th>Holiday</th>
</tr>
<tr>
</tr>
<tr>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="clockHours">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="Incentive">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="offClock">0.00</label></td>
<td style="border: 1px solid black; width: 90px; padding: 5px"><label id="regularHours">0.00</label>
</tr>
</table>
Trying to figure out why my <textarea id='customer-title'> is not expanding wider than 216px and producing 3-4 rows???
I am in need of the element to be 4-5 rows in size and stretch to <table id='meta'>. Would also like #address to be same width.
I have working example in JSFiddle - css problem
CSS:
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
#page-wrap { width: 800px; margin: 0 auto; }
textarea { border: 0; font: 14px Georgia, Serif; overflow: hidden; resize: none; }
table { border-collapse: collapse; }
table td, table th { border: 1px solid black; padding: 5px; }
#header { height: 15px; width: 100%; margin: 20px 0; background: #222; text-align: center; color: white; font: bold 15px Helvetica, Sans-Serif; text-decoration: uppercase; letter-spacing: 20px; padding: 8px 0px; }
/*#address { width: 250px; height: 150px; float: left; }*/
#address { width: 250px; height: 150px; font: 20px "Comic Sans"; font-weight: bold; float: left; }
#customer { overflow: hidden; }
#logo { text-align: right; float: right; position: relative; margin-top: 25px; border: 1px solid #fff; max-width: 340px; max-height: 100px; overflow: hidden; }
#logo:hover, #logo.edit { border: 1px solid #000; margin-top: 0px; max-height: 125px; }
#logoctr { display: none; }
#logo:hover #logoctr, #logo.edit #logoctr { display: block; text-align: right; line-height: 25px; background: #eee; padding: 0 5px; }
#logohelp { text-align: left; display: none; font-style: italic; padding: 10px 5px;}
#logohelp input { margin-bottom: 5px; }
.edit #logohelp { display: block; }
.edit #save-logo, .edit #cancel-logo { display: inline; }
.edit #image, #save-logo, #cancel-logo, .edit #change-logo, .edit #delete-logo { display: none; }
#customer-title { font-size: 20px; font-weight: bold; float: left; }
#meta { margin-top: 1px; width: 300px; float: right; }
#meta td { text-align: right; }
#meta td.meta-head { text-align: left; background: #eee; }
#meta td textarea { width: 100%; height: 20px; text-align: right; }
#items { clear: both; width: 100%; margin: 30px 0 0 0; border: 1px solid black; }
#items th { background: #eee; }
#items textarea { width: 80px; height: 50px; }
#items tr.item-row td { border: 0; vertical-align: top; }
#items td.description { width: 300px; }
#items td.item-name { width: 175px; }
#items td.description textarea, #items td.item-name textarea { width: 100%; }
#items td.total-line { border-right: 0; text-align: right; }
#items td.total-value { border-left: 0; padding: 10px; }
#items td.total-value textarea { height: 20px; background: none; }
#items td.balance { background: #eee; }
#items td.blank { border: 0; }
#terms { text-align: center; margin: 20px 0 0 0; }
#terms h5 { text-transform: uppercase; font: 13px Helvetica, Sans-Serif; letter-spacing: 10px; border-bottom: 1px solid black; padding: 0 0 8px 0; margin: 0 0 8px 0; }
#terms textarea { width: 100%; text-align: center;}
textarea:hover, textarea:focus, #items td.total-value textarea:hover, #items td.total-value textarea:focus, .delete:hover { background-color:#EEFF88; }
.delete-wpr { position: relative; }
.delete { display: block; color: #000; text-decoration: none; position: absolute; background: #EEEEEE; font-weight: bold; padding: 0px 3px; border: 1px solid; top: -6px; left: -22px; font-family: Verdana; font-size: 12px; }
HTML:
<body>
<form action="insert.php" id="testinsert" method="POST">
<input type="submit" value="Submit" />
</form>
<div id="page-wrap">
<textarea id="header">INVOICE</textarea>
<div id="identity">
<textarea form ="testinsert" name="address" id="address">Business Name
Address 1
Address 2
Phone: (000) 555-1212</textarea>
<div id="logo">
<div id="logoctr">
Change Logo
Save
|
Delete Logo
Cancel
</div>
<div id="logohelp">
<input id="imageloc" type="text" size="50" value="" /><br />
(max width: 540px, max height: 100px)
</div>
<img id="image" src="images/CM_LOGO.JPG" alt="logo" />
</div>
</div>
<div style="clear:both"></div>
<div id="customer">
<textarea form ="testinsert" name="customer" id="customer-title">Customer Name Incorporated
c/o Person to Contact</textarea>
<table id="meta">
<tr>
<td class="meta-head">Invoice #</td>
<td><textarea form ="testinsert" name="invoice">20170212</textarea></td>
</tr>
<tr>
<td form ="testinsert" name="date" class="meta-head">Date</td>
<td><textarea id="date">February 12, 1965</textarea></td>
</tr>
<tr>
<td class="meta-head">Amount Due</td>
<td><div class="due">$735.00</div></td>
</tr>
</table>
</div>
<table id="items">
<tr>
<th>Item</th>
<th>Description</th>
<th>Unit Cost</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Business Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$150.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$450.00</span></td>
</tr>
<tr class="item-row">
<td class="item-name"><div class="delete-wpr"><textarea>Hourly Rate</textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td>
<td class="description"><textarea>Residential Rate: Consulting/Labor/Installs</textarea></td>
<td><textarea class="cost">$95.00</textarea></td>
<td><textarea class="qty">3</textarea></td>
<td><span class="price">$285.00</span></td>
</tr>
<tr id="hiderow">
<td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Subtotal</td>
<td class="total-value"><div id="subtotal">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value"><div id="total">$735.00</div></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Amount Paid</td>
<td class="total-value"><textarea id="paid">$0.00</textarea></td>
</tr>
<tr>
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">Balance Due</td>
<td class="total-value balance"><div class="due">$735.00</div></td>
</tr>
</table>
<input type="hidden" form ="testinsert" name="xdate" id="xdate"></input>
<input type="hidden" form ="testinsert" name="sales" id="sales"></input>
<input type="hidden" form ="testinsert" name="owed" id="owed"></input>
<input type="hidden" form ="testinsert" name="deducted" id="deducted"></input>
<div id="terms">
<h5>Terms</h5>
<textarea>NET 30 Days. Finance Charge of 1.5% will be made on unpaid balances after 30 days.</textarea>
</div>
</div>
If you explicitly define the width in your css the text area will expand to the size of the div it is in.
#customer-title {
font-size: 20px;
font-weight: bold;
float: left;
width: 100%;
}
You can change the width of the address as well if you want it to take up the entire space of its parent container:
#address {
width: 100%;
height: 150px;
font: 20px "Comic Sans";
font-weight: bold;
float: left;
}
Had to adjust for the parent div:
#identity{
left: 50%;
top: 50%;
margin-left:-210px;
margin-top:-255px;
}
I have been trying to design a table like
As you see in the snipped code, table rows are not next to each other. the table rows place itself under the above table row. What should I add or change to make them place next to each other like the one in the picture?
table.roomstable th {
border-left: 0 none !important;
background-color: #5a97ee;
padding: 6px 8px;
margin: 0;
color: #fff;
font-weight: bold;
font-size: small;
}
table.roomstable {
width: 100%;
}
table.roomstable tr {
}
table.roomstable th#price_highlight {
width: 76px;
min-width: 76px;
background: #00357f;
text-align: center;
}
th#price_highlight div.price-highlight-inner {
position: relative;
margin: 0;
padding: 0;
}
.roomArea th.canwrap {
white-space: normal;
}
.btnBooking-wrap .btn-acb {
width: 100%;
min-width: 110px;
color: #fff !important;
font-size: 13px !important;
}
.btnBooking-wrap .btn-acb {
border-collapse: collapse;
bottom: 0px;
box-shadow: rgb(170, 170, 170) 0px 0px 3px 0px;
color: rgb(255, 255, 255);
cursor: pointer;
height: 33px;
left: 0px;
min-height: 0px;
min-width: 110px;
position: relative;
right: 0px;
top: 0px;
vertical-align: middle;
width: 121px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 60.5px 16.5px;
transform-origin: 60.5px 16.5px;
background: rgb(8, 150, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px solid rgb(255, 255, 255);
border-radius: 3px 3px 3px 3px;
font: normal normal bold normal 13px / 19.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 5px 10px;
}
.btnBooking-wrap .btn-acb:hover {
background-color: #003580;
}
table.roomstable td.room-type-container {
border-right: 1px solid #5a97ee !important;
}
.bed-types-wrapper {
margin: 16px 8px;
line-height: 1.4;
}
.bed-types {
background: #e5ebfb;
padding: 5px 10px;
border-radius: 4px;
}
.bed-types label {
display: table;
font-size: 13px;
}
.bed-label {
font-weight: bold;
vertical-align: top;
}
.bed-type-select {
display: table-cell;
vertical-align: top;
padding-right: 5px;
}
.name-bed-types {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}
.room-options {
margin-bottom: 13px;
font-size: 13px;
font-weight: lighter;
color: #390;
display: block;
margin-top: 3px;
}
.included-price-tax {
font-size: 13px;
text-align: left;
}
.room-options-wrapper span {
clear: left;
/*padding-left: 0!important;*/
padding-left: 4px!important;
}
table.roomstable td {
border-left: 1px solid #96b2d9;
padding: 6px;
}
.bb {
border-bottom: 1px solid #96b2d9;
}
<div id="rooms_table" style="margin: 0;">
<div id="available_rooms" style="margin-bottom: .5em;">
<form autocomplete="off" id="roomsFor" name="roomsFor" action="#" method="GET">
<div class="roomArea" id="maxHotelRoomArea">
<div id="individualRooms" class="rtshown">
<table class="roomstable roomstable-long-language">
<thead class style="width:814px; top:0px; z-index:auto">
<tr id="maxhotel_table_header">
<th class="canwrap" style="width:273px"> Accommodation Type</th>
<th class="occupancy-dropdown-header" style="width: 56px;">Max</th>
<th id="price_highlight" class="price-figure canwrap" style="width:76px;">
<div class="price-highlight-inner">
Price for 1 night
</div>
</th>
<th class="conditions" style="width:150px;">Your options</th>
<th id="number_rooms_header" class="canwrap" style="width:60px;">
Quantity
</th>
<th class="cyr-header canwrap" style="width:117px;">Confirm your reservation
</th>
</tr>
</thead>
<tbody id="room_availability_container">
<tr>
<td colspan="5" style="padding:0;"></td>
<td id="btnBooking" rowspan="400" style="min-width: 121px; background-color: rgb(255, 255, 255);">
<div class="btnBooking-wrap" style="display:block; width:121px; top:42px; padding-top:10px; z-index:auto">
<div id="booking_summary" style="display:none;">
DISPLAY BOOKING SUMMARY HERE
<span class="rooms-count">
<strong>1</strong> room selected
</span>
<span class="total-price">
BAM 60
</span>
<span class="breakfast-included">
Breakfast <strong>included</strong>
</span>
</div>
<button class="btn-acb">Reserve</button>
</div>
</td>
</tr>
<tr class="room-counter-1">
<td class="roomId room-type room-type-container">
<a name="roomId" style="display:block; position:relative; top:-50px;"></a>
<div class="room-type-room-info" id="roomId"></div>
<span style="display:block;">
Standard Double Room
<div class="bed-types bed-types-wrapper">
<label class="bed-label">Choose your bed:</label>
<!--alttaki 2 label oda isminin detaylari.-->
<label>
<div class="bed-type-select">
<input type="radio" id="bedPreference_roomId"
name="bedPreference_roomId"
data-dojo-type="dijit/form/RadioButton"/>
</div>
<ul class="name-bed-types">
<li class="bed-type">
1 single bed
<div class="riba-beds"
style="font-size: 24px;"></div>
</li>
</ul>
</label>
<label>
<div class="bed-type-select">
<input type="radio" id="_beddPreference_roomId"
name="beddPreference_roomId"
data-dojo-type="dijit/form/RadioButton"/>
</div>
<ul class="name-bed-types">
<li class="bed-type">
1 large double bed
<div class="riba-double-bed"
style="font-size: 24px;"></div>
</li>
</ul>
</label>
</div>
<span class="room-options">
<div class="room-options-wrapper">
<span><div style="zoom:0.7;" class="riba-bell"></div> name</span>
<span><div style="zoom:0.7;" class="riba-air-conditioner"></div> name</span>
<span><div style="zoom:0.7;" class="riba-departures"></div> name</span>
<span><div style="zoom:0.7;" class="riba-family"></div> name</span>
</div>
</span>
<div class="included-price-tax">
<strong class="included-label">Included:</strong> 17% VAT, 1BAM city tax per person per night.
</div>
</span>
</td>
<td colspan="4" style="padding:0;"></td>
</tr>
<tr class="room-counter-1" id="roomIdx">
<td class="room-max-person bb" id="roomMaxPerson">
2
</td>
<td class="room-price bb" id="roomPrice">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicy">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdown">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
<tr class="room-counter-1" id="roomIdxx">
<td class="room-max-person bb" id="roomMaxPersonx">
2
</td>
<td class="room-price bb" id="roomPricex">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicyx">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdownx">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
<tr class="room-counter-1" id="roomIdxxx">
<td class="room-max-person bb" id="roomMaxPersonxx">
2
</td>
<td class="room-price bb" id="roomPricexx">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicyxx">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdownxx">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
You should add a rowspan to the most left column <td rowspan="4" class="roomId room-type room-type-container">
Check the code snippet.
table.roomstable th {
border-left: 0 none !important;
background-color: #5a97ee;
padding: 6px 8px;
margin: 0;
color: #fff;
font-weight: bold;
font-size: small;
}
table.roomstable {
width: 100%;
}
table.roomstable tr {
}
table.roomstable th#price_highlight {
width: 76px;
min-width: 76px;
background: #00357f;
text-align: center;
}
th#price_highlight div.price-highlight-inner {
position: relative;
margin: 0;
padding: 0;
}
.roomArea th.canwrap {
white-space: normal;
}
.btnBooking-wrap .btn-acb {
width: 100%;
min-width: 110px;
color: #fff !important;
font-size: 13px !important;
}
.btnBooking-wrap .btn-acb {
border-collapse: collapse;
bottom: 0px;
box-shadow: rgb(170, 170, 170) 0px 0px 3px 0px;
color: rgb(255, 255, 255);
cursor: pointer;
height: 33px;
left: 0px;
min-height: 0px;
min-width: 110px;
position: relative;
right: 0px;
top: 0px;
vertical-align: middle;
width: 121px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 60.5px 16.5px;
transform-origin: 60.5px 16.5px;
background: rgb(8, 150, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 2px solid rgb(255, 255, 255);
border-radius: 3px 3px 3px 3px;
font: normal normal bold normal 13px / 19.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
padding: 5px 10px;
}
.btnBooking-wrap .btn-acb:hover {
background-color: #003580;
}
table.roomstable td.room-type-container {
border-right: 1px solid #5a97ee !important;
}
.bed-types-wrapper {
margin: 16px 8px;
line-height: 1.4;
}
.bed-types {
background: #e5ebfb;
padding: 5px 10px;
border-radius: 4px;
}
.bed-types label {
display: table;
font-size: 13px;
}
.bed-label {
font-weight: bold;
vertical-align: top;
}
.bed-type-select {
display: table-cell;
vertical-align: top;
padding-right: 5px;
}
.name-bed-types {
display: inline-block;
list-style-type: none;
padding: 0;
margin: 0;
}
.room-options {
margin-bottom: 13px;
font-size: 13px;
font-weight: lighter;
color: #390;
display: block;
margin-top: 3px;
}
.included-price-tax {
font-size: 13px;
text-align: left;
}
.room-options-wrapper span {
clear: left;
/*padding-left: 0!important;*/
padding-left: 4px!important;
}
table.roomstable td {
border-left: 1px solid #96b2d9;
padding: 6px;
}
.bb {
border-bottom: 1px solid #96b2d9;
}
<div id="rooms_table" style="margin: 0;">
<div id="available_rooms" style="margin-bottom: .5em;">
<form autocomplete="off" id="roomsFor" name="roomsFor" action="#" method="GET">
<div class="roomArea" id="maxHotelRoomArea">
<div id="individualRooms" class="rtshown">
<table class="roomstable roomstable-long-language">
<thead class style="width:814px; top:0px; z-index:auto">
<tr id="maxhotel_table_header">
<th class="canwrap" style="width:273px"> Accommodation Type</th>
<th class="occupancy-dropdown-header" style="width: 56px;">Max</th>
<th id="price_highlight" class="price-figure canwrap" style="width:76px;">
<div class="price-highlight-inner">
Price for 1 night
</div>
</th>
<th class="conditions" style="width:150px;">Your options</th>
<th id="number_rooms_header" class="canwrap" style="width:60px;">
Quantity
</th>
<th class="cyr-header canwrap" style="width:117px;">Confirm your reservation
</th>
</tr>
</thead>
<tbody id="room_availability_container">
<tr>
<td colspan="5" style="padding:0;"></td>
<td id="btnBooking" rowspan="400" style="min-width: 121px; background-color: rgb(255, 255, 255);">
<div class="btnBooking-wrap" style="display:block; width:121px; top:42px; padding-top:10px; z-index:auto">
<div id="booking_summary" style="display:none;">
DISPLAY BOOKING SUMMARY HERE
<span class="rooms-count">
<strong>1</strong> room selected
</span>
<span class="total-price">
BAM 60
</span>
<span class="breakfast-included">
Breakfast <strong>included</strong>
</span>
</div>
<button class="btn-acb">Reserve</button>
</div>
</td>
</tr>
<tr class="room-counter-1">
<td rowspan="4" class="roomId room-type room-type-container">
<a name="roomId" style="display:block; position:relative; top:-50px;"></a>
<div class="room-type-room-info" id="roomId"></div>
<span style="display:block;">
Standard Double Room
<div class="bed-types bed-types-wrapper">
<label class="bed-label">Choose your bed:</label>
<!--alttaki 2 label oda isminin detaylari.-->
<label>
<div class="bed-type-select">
<input type="radio" id="bedPreference_roomId"
name="bedPreference_roomId"
data-dojo-type="dijit/form/RadioButton"/>
</div>
<ul class="name-bed-types">
<li class="bed-type">
1 single bed
<div class="riba-beds"
style="font-size: 24px;"></div>
</li>
</ul>
</label>
<label>
<div class="bed-type-select">
<input type="radio" id="_beddPreference_roomId"
name="beddPreference_roomId"
data-dojo-type="dijit/form/RadioButton"/>
</div>
<ul class="name-bed-types">
<li class="bed-type">
1 large double bed
<div class="riba-double-bed"
style="font-size: 24px;"></div>
</li>
</ul>
</label>
</div>
<span class="room-options">
<div class="room-options-wrapper">
<span><div style="zoom:0.7;" class="riba-bell"></div> name</span>
<span><div style="zoom:0.7;" class="riba-air-conditioner"></div> name</span>
<span><div style="zoom:0.7;" class="riba-departures"></div> name</span>
<span><div style="zoom:0.7;" class="riba-family"></div> name</span>
</div>
</span>
<div class="included-price-tax">
<strong class="included-label">Included:</strong> 17% VAT, 1BAM city tax per person per night.
</div>
</span>
</td>
<td colspan="4" style="padding:0;"></td>
</tr>
<tr class="room-counter-1" id="roomIdx">
<td class="room-max-person bb" id="roomMaxPerson">
2
</td>
<td class="room-price bb" id="roomPrice">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicy">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdown">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
<tr class="room-counter-1" id="roomIdxx">
<td class="room-max-person bb" id="roomMaxPersonx">
2
</td>
<td class="room-price bb" id="roomPricex">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicyx">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdownx">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
<tr class="room-counter-1" id="roomIdxxx">
<td class="room-max-person bb" id="roomMaxPersonxx">
2
</td>
<td class="room-price bb" id="roomPricexx">
<span class="room-price-span">195BAM</span>
</td>
<td class="option-policy bb" id="optionPolicyxx">
<span>test</span>
<span>test2</span>
</td>
<td class="room-num-dropdown bb" id="roomNumDropdownxx">
<select>
<option value="1">1 (200BAM)</option>
<option value="2">2 (350BAM)</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
I am creating a table. I want to remove table border line, how do I this?
Here is my code:
<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th style="text-align:left; width:120px;">Item</th>
<th style="text-align:left; width:200px;">Description</th>
<th style="width:100px;">Unit Cost</th>
<th style="text-align:right; width:60px;">Qty</th>
<th style="text-align:left; width:100px;">Tax</th>
<th style="text-align:left; width:100px;">Tax</th>
<th style="text-align:left; width:100px;">Line Total</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=7 width=800>
<div id="dataRows">
<div class="fieldRow" id="template">
<select class="items" name="items" style="width:127px; float:left;" id="items"> <option value="1" selected="selected" disabled="disabled"></option></select>
<textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:211px; border-radius:0px; margin: -1px 0px 0;"></textarea>
<input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px 0px 0;">
<input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 0px 0;">
<select name="firsttax" id="firsttax" class="firsttax" style=" float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected" ></option></select>
<select name="secondtax" id="secondtax" class="secondtax" style="float:left; display: block; height: 31px; width:104px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
<input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:left; display: block; height: 31px; width:104px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -2px 0px 0;">
<input type="button" class="button remove" id="btnDel" value="Remove Row" style="float:right; margin:0 -110px; color: #ffffff; background-color: #d9534f; border-color: #d43f3a; padding: 3px 10px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; border:1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;" />
</div>
</div>
</td>
</tr>
<input type="hidden" id="itemscounter" name="itemscounter" value=""/>
<tr>
<td colspan=7 rowspan=2 width=800 style="border:0px solid white;">
<div style="border:1px solid #DDDDDD; width:317px; height:50px; margin:0 -1px; float:right;">
<label class="required" id="invoicetotal" for="Invoicetotal" style="padding-top:3px;">Invoice Total(USD)</label>
<span style=" font-weight:bold; margin:4px -204px 0; float:right;">$</span>
<input type="text" class="required" id="invoicetotalamount" name="invoicetotalamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/><br>
<label class="required" id="paidtodate" for="paidtodate" style="margin-top: -6px;">Paid to date</label>
<input type="text" class="required" id="paidtodateamount" name="paidtodateamount" placeholder="0.00" style=" color:#526273; font-weight:bold; text-align:right; border: 0px solid #000000;"/>
</div>
<div class="clear"></div>
<div style="border:1px solid #DDDDDD; width:317px; height:33px; margin:50px -316px 0; float:right;">
<label class="required" id="balance" for="balance" style="margin-top:0px;">Balance(USD)</label>
<span style=" font-weight:bold; margin:7px 45px 0; float:left;">$</span>
<input type="text" class="required" id="balanceamount" name="balanceamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/>
</div>
</td>
</tr>
</tbody>
</table>
</div>
and here is my css:
#table{
float: left;
height: 200px;
margin: -291px 19px 0;
width: 825px;
}
and here is screenshot:
use css
it would be
table, th, td
{
border: 0;
}
table
{
border-collapse:collapse;
}
<table border="0" style="width:825px;"> </table>
put border value 0 in css or declare table border like these above i mentioned.. post ur full css code..
Try to use this code:
<table border="0" style="width:825px;border:0px;"> </table>
Try this simple CSS
table.myTable { border:none; }
edit your class and add/change border to zero or try changing into border tag in table.