I'd like to have table like this:
And I'm trying to do this with bootstrap grid system, but it doesn't work...here is my code. Maybe the problem is with class container? It is correct to put div there?
<table class="table table-bordered" cellpadding="0" cellspacing="0">
<div class="container">
<tr>
<th class="col-sx-6">Avanced Time targetting</th>
<th class="col-xs-1">Midnight<br/>12am</th>
<th class="col-xs-1">4am</th>
<th class="col-xs-1">8am</th>
<th class="col-xs-1">Noon<br/>12pm</th>
<th class="col-xs-1">4pm</th>
<th class="col-xs-1">8pm</th>
</tr>
<tr>
<td class="col-sx-6">
<span>Monday</span>
<ul>
<li>
<button>All days</button>
</li>
<li>
<button>Morning</button>
</li>
<li>
<button>9-5</button>
</li>
<li>
<button>Evening</button>
</li>
<li>
<button>Custom</button>
</li>
<li>
<button>Clear</button>
</li>
<li>
<button>Restore</button>
</li>
</ul>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
<td class="col-xs-1">
<input type="text"/>
</td>
</tr>
</div>
Your HTML code is correct but you need to put the container div before the table.
Here is some of basic understanding about bootstrap grid system.
The container div must be outside the table in order for it to align correctly. Furthermore, the structure of your table will align perfectly when you use the theader, tbody and tfooter tags in your table along with the th/td tags.
Related
I added a radio button element to my table. However, it doesn't appear on my page. I took the same exact code and created a snippet and the radio button does appear. Also, I added a background color, just to see where it would be located and it turns out the radio button is covering my text. Does anyone know why this is happening and how to fix it?
EDIT: This is also made under Bootstrap 4.
This how it looked when I added a background color to the radio button.
<div class="row">
<div class="col-25">
<h1>ABC Corp</h1>
<h4>Bill for the month of: June</h4>
<h4>Payment due: 5/10/2020</h4>
<hr />
<table id="billing">
<tr>
<th width="25%">Company</th>
<th width="25%">Plan</th>
<th width="25%">Packages</th>
<th width="25%">Price/pkg</th>
<th>Total</th>
</tr>
<tr>
<td>ACME</td>
<td>Premium</td>
<td>10,000</td>
<td>$0.039</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">390.00</label>
</div>
</td>
</tr>
<tr>
<td>NB Distribution</td>
<td>Professional</td>
<td>1,000</td>
<td>$0.049</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">49.00</label>
</div>
</td>
</tr>
</table>
<hr>
<p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
<hr >
</div>
</div>
don't enclose your input within the label tag, instead separate those two like below.
<input type="radio" id='regular' name="optradio">
<label for="regular">390.00</label>
You can use display: flex on the label:
label {
display: flex;
}
<div class="row">
<div class="col-25">
<h1>ABC Corp</h1>
<h4>Bill for the month of: June</h4>
<h4>Payment due: 5/10/2020</h4>
<hr />
<table id="billing">
<tr>
<th width="25%">Company</th>
<th width="25%">Plan</th>
<th width="25%">Packages</th>
<th width="25%">Price/pkg</th>
<th>Total</th>
</tr>
<tr>
<td>ACME</td>
<td>Premium</td>
<td>10,000</td>
<td>$0.039</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">390.00</label>
</div>
</td>
</tr>
<tr>
<td>NB Distribution</td>
<td>Professional</td>
<td>1,000</td>
<td>$0.049</td>
<td>
<div>
<label><input type="radio" id='regular' name="optradio">49.00</label>
</div>
</td>
</tr>
</table>
<hr>
<p>Balance due <span class="price" style="color:black"><b>$439.00</b></span></p>
<hr>
</div>
</div>
First of all the radio buttons are shown in browser #csb00 and also you have to make different id's for two radio buttons.
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
I want it to auto jump to next line if the label text overflow. I no want the label to be hidden or using ellipsis.
Note: In my case, i will loop the div content in the same row td. I want to break the word to next line in full size of browser or browser resized to smaller.
How can i solve this problem?
Apologies for having too less reputation to post a comment.
But have you checked out Bootstrap tables?
It not only solves your problem, but is a good step in moving towards simple web development.
Bootstrap takes care of everything and allows us to make neat and clean tables with very little code from our side.
If at all you need to further style your table, you can add styling OVER the bootstrap styled table.
Check out the following simple tutorial where you can also try it out online.
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
To prove how simple it is,
I have pasted my code into a simple HTML page.
Added bootstrap.
And voila! Your issue is solved in the example given below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
</tbody>
</table>
</body>
</html>
I am still confused on what you wanted, so I have included 2 approaches.
Try Float:right;
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%; float:right;">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
You can use word-wrap: break-word for your label tag.
The word-wrap property allows long words to be able to be broken and wrap onto the next line. break-word allows unbreakable words to be broken
<table>
<thead>
<tr>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
MDN web docs word-wrap
I have a table on my eCommerce checkout that has been recreated below.
I need to expand the width of the "shipping" method cell so that it can better fit the text inside, but also keep the order totals on the right hand side.
If I increase the width of the shipping method cell, it will expand the width of them all which will move the orders totals to the left (I do not want this to happen).
Essentially I need to change the width of the shipping method cell without effecting the other columns.
Any ideas?
/* Restricts outer div container to illustrate problem */
.outer {
width: 400px;
}
<div class="outer">
<table class="shop_table">
<thead>
<tr>
<th class="product-name">Product</th>
<th class="product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-name">
<div class="product-wrap">
T-Shirts for cool people - size XXL<strong>× 12</strong>
</div>
</td>
<td class="product-total">
$348
</td>
</tr>
</tbody>
<tfoot>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td>$348
</td>
</tr>
<tr class="shipping">
<th>Shipping</th>
<td data-title="Shipping">
<ul id="shipping_method">
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_1">Standard: Free
<br><small>Estimated delivery by Wednesday Sep 14th</small>
</label>
</li>
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_2">Expedited: $23
<br><small>Estimated delivery by Tuesday Sep 13th</small>
</label>
</li>
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_3">Priority: $46
<br><small>Estimated delivery by Tuesday Sep 13th</small>
</label>
</li>
</ul>
</td>
</tr>
<tr class="order-total">
<th>Total</th>
<td><strong>$348</strong>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="outer">
<table class="shop_table">
<thead>
<tr>
<th class="product-name">Product</th>
<th class="product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-name">
<div class="product-wrap">
T-Shirts for cool people - size XXL<strong>× 12</strong>
</div>
</td>
<td class="product-total">
$348
</td>
</tr>
</tbody>
<tr class="cart-subtotal">
<th>Subtotal</th>
<td>$348
</td>
</tr>
</table>
<table>
<tr class="shipping">
<th>Shipping</th>
<td data-title="Shipping">
<ul id="shipping_method">
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_1">Standard: Free
<br><small>Estimated delivery by Wednesday Sep 14th</small>
</label>
</li>
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_2">Expedited: $23
<br><small>Estimated delivery by Tuesday Sep 13th</small>
</label>
</li>
<li>
<input type="radio" class="shipping_method">
<label for="shipping_method_3">Priority: $46
<br><small>Estimated delivery by Tuesday Sep 13th</small>
</label>
</li>
</ul>
</td>
</tr>
</table>
<table>
<tr class="order-total">
<th>Total</th>
<td><strong>$348</strong>
</td>
</tr>
</table>
</div>
/* Restricts outer div container to illustrate problem */
Try this html with css. Code above is by making them as separate tables. You could also make 3 separate table inside a big one.
.outer { width: 400px; }
#shipping_method li {width:340px;}
My web page has a table and for one element i have to apply grid property of foundation. I have to divide the row into two columns having size 10 and 2. First column is an input field and second is a drop down icon, But when I try to do it 2nd column is going down after first column.
<table class="inner-table">
<tr>
<td width="20">plan </td>
<td width="50">Mobile</td>
<td width="15">20%</td>
<td width="15">50%</td>
</tr>
<tr>
<td>dsffgh</td>
<td>Mobile</td>
<td>20%</td>
<td>50%</td>
</tr>
<tr>
<td>Plan</td>
<td>
<div class="row">
<form class="project-name">
<div class="small-11 columns">
<input type="text" name="projectName">
</div>
<div class="small-1 columns">
<a href="#" data-dropdown="drop1"><img src="images/Rectangle-13.png" alt="dropdown-menu" height="10em" width="10em">
</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>10</li>
<li>15<li>
<li>20</li>
</ul>
</div>
</form>
</div>
</td>
</tr>
<tr>
<td id="dot-emp3" class="show-more">
...
</td>
</tr>
</table>
http://codepen.io/anon/pen/MaaOxG
I am attempting to align two separate tables in html. I want them centered with one on the left, one on the right and some space between the tables. Here is the code I currently have set up. I have them aligned, but one is left and one is right with lots of space between them. New to Html please would be appreciated!
<h1>
Retrofit</h1>
<p>
Kendell Retrofit is the latest division to the Kendell divisions. Our Retrofit team includes customer service, outside sales, production and keying specialists. </p>
<div>
<table style="float:left">
</table>
<table align="left" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
Markets:<br />
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Commercial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Financial</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Global</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Government</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Healthcare</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Higher Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
K-12 Education</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Retail</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table style="float:right">
</table>
<table align="right" border="0" cellpadding="0" cellspacing="2" style="width: 150px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">
<p>
Brands:</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<ul>
<li>
Arrow</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Best</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Corbin Russwin</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Dorma</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Falcon</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Kwikset</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Sargent</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Schlage</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Stanley</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Weiser</li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>
Yale</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
<hr />
<p>
</p>
Basic nested table will do it.
<table width="600px" >
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of left side
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="width: 50%;" >
<table width="100%" >
<tr>
<td>
content of right side
</td>
</tr>
</table>
</td>
</tr>
</table>
Check it here
Note: margin: 0 auto; makes your table at the center
Instead of using float left/right use inline-table as shown below:
table
{
display:inline-table;
}
This way you can have tables side by side.
If you change the value of "style="width: 150px" by one more high (200px or 250px), does it work ?
You only need to float the first table. Then you simply add margin-right: 50px; (for example) to it and the second one will be next to it, 50px away. If you want to center them both, put them in a div with some width and add margin: 0 auto;. Here is a jsbin example.
P.S.: Press edit in top-right corner to see the code. The good thing about using this float to the first table, with 2 seperate tables and with margin: 0 auto; to the parent div is that it is responsive. Try resizing the browser window and you will see how the tables seperate on smaller resolutions (good for a website that is designed to run on smartphones too)
They are misaligned because you have Markets:<br /> in first table and <p>Brands:</p> in second table. You need to be consistent with them.
You can use float:left; and margin-right on the first div to get the spacing.
JSBin sample (Seems like Fiddle is down)
See this DEMO
You can try on the second table :
<table style="float:left">
and replace on the second table :
align="right"
with
align="left"