I'm wondering how to enable checkbox in table header and table data of Bootstrap 3. Here is what I did in my code:( modified from Bootstrap example)
<div class="box-body table-responsive">
<table id="example1" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>
<div class="checkbox">
<label>
<input type="checkbox"> Checkbox
</label>
</div>
</th>
<th>用户id</th>
<th>姓名</th>
<th>电邮</th>
<th>组别</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
Here is the result:
As you see, the checkbox in header is now shown. And the checkbox in table data is not enabled (not clickable). Does anybody have example code to implement checkbox function?
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 an html table that is cutting off all rows beyond the 200th. The rows are in fact there, because the list.js javascript search feature will find data in them if I search for it, but they don't display when the table loads.
Is this a limitation or setting in bootstrap or some other html thing?
Update - here is a simplified version of the table.
Also, the javascript libraries I'm using on this page that interact with the table are list.js and treetable.js.
I will note that I have seen this issue on another app I developed, but 99% of the time it wasn't an issue so it was never resolved. On this app in question, it will almost always be an issue.
<div class="table">
<div class="table-responsive" id="table3div">
<table class="table table-hover table-condensed tablesorter" id="table3">
<thead>
<tr>
<th>
<div class="checkbox custom-control custom-checkbox">
<label>
<input type="checkbox" id="checkAlltable3" />
<span class="custom-control-indicator"></span>
</label>
</div>
</th>
<th class="header">Description</th>
<th class="header">Status</th>
<th class="header">Associated With</th>
<th class="header">Assigned To</th>
<th class="header">ID</th>
<th class="header">Type</th>
<th class="header headerSortDown">Due Date</th>
</tr>
</thead>
<tbody class="list">
#for (int i = 0; i < Model.IssuesAndNotes.Count; i++)
{
<tr>
<td>
<div class="checkbox custom-control custom-checkbox">
<input id="checkBox" type="checkbox">
</div>
</td>
<td class="description">
Some data
</td>
<td class="status">
Some data
</td>
<td class="association">
Some data
</td>
<td class="assignedTo">
Some data
</td>
<td class="issueId">
Some data
</td>
<td class="type">
Some data
</td>
<td class="date">
Some data
</td>
</tr>
}
</tbody>
</table>
</div>
The default limit in list.js is 200 you can modify the limit in the parameters https://github.com/javve/list.js#parameters
For clarification look to the API docs on page options http://listjs.com/api/
This is my jsp code:
<table class="table table-striped">
<thead>
<tr>
<th>
Column name
</th>
</tr>
</thead>
<tbody>
<c:forEach var="question" items="${questions}">
<tr>
<td>
<h4>${question.sequence} - ${question.questionText}</h4>
<c:forEach var="answer" items="${question.answers}">
<div class='answer'>
<input type='radio' name="question${question.id}" id='${answer.id}'/>
<label for='${answer.id}'> ${answer.answerText}</label>
</div>
</c:forEach>
</td>
<tr>
</c:forEach>
</tbody>
</table>
When the page is printed, this code is creating an empty tr tag after each iteration and the result on html is:
<tbody>
<tr>
<td>
<h4>1 - Question 1?</h4>
<div class="answer">
<input type="radio" name="question1" id="1">
<label for="1">Answer 1.</label>
</div>
<div class="answer">
<input type="radio" name="question1" id="2">
<label for="2">Answer 2.</label>
</div>
</td>
</tr>
<tr>
</tr>
...... (some more iterations with the same result - a question and a empty tr tag)
</tbody>
Anyone knows what's happening with my code??
You are not closing the tr in the loop. You are missing the / in the closing tr. The second <tr> is causing the new row to be output.
Ok I was trying to do a table with input fields. To set the sizes of each field I understood that I had to set the col-size in the header.
<thead>
<tr>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-1">Small</th>
<th class="col-sm-2">Large</th>
<th class="col-sm-2">Large</th>
</tr>
</thead>
However the inputs expand to their max width with no regard to col-size.
http://jsfiddle.net/m79HR/
Possibly this is an improper use of Bootstrap but I saw it as a best bet for inline inputs with headers above.
Also, lets say I want this particular grid to have 18 columns instead of the default 12 is that possible here just in this particular case?
Just add the "form-control" class to the inputs and bootstrap takes care of the rest.
Doing it this way makes it easier to add columns or change the width, since you only have to change in the header as opposed to every row/input.
<table class="table table-condensed">
<thead>
<tr>
<th class="col-sm-12 col-md-4">Large</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
<th class="col-sm-12 col-md-2">Small</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
<td>
<input type="text" class="form-control" />
</td>
</tr>
</tbody>
</table>
You need to use the class col-md-* for normal screens col-sm-* for tablet screen and col-xs-* for mobile screen, there is also col-lg-* for larger screens, you can combine all these classes to make it responsive, like:
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<thead>
<tr>
<th>Very Small</th>
<th>Very Small</th>
<th>Very Small</th>
<th>Large</th>
<th>Small</th>
<th>Medium</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-1">
<input class="col-sm-12" placeholder="col-sm-1" />
</td>
<td class="col-sm-4">
<input class="col-sm-12" placeholder="col-sm-4" />
</td>
<td class="col-sm-2">
<input class="col-sm-12" placeholder="col-sm-2" />
</td>
<td class="col-sm-3">
<input class="col-sm-12" placeholder="col-sm-3" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
For Bootstrap 4, you need to additionally add the d-flex class to the rows, like
<table>
<thead>
<tr class="d-flex">
<th class="col-3">3 columns wide header</th>
<th class="col-sm-5">5 columns wide header</th>
<th class="col-sm-4">4 columns wide header</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-3">3 columns wide content</th>
<td class="col-sm-5">5 columns wide content</th>
<td class="col-sm-4">4 columns wide content</th>
</tr>
</tbody>
</table>