I have a responsive-table within a td with a colspan. Instead of the responsive-table limiting the width and creating a scroll bar for the inner table, it stretches the table to be too large for the screen. Is there any css that can be added to make this work other than setting an explicit width on the responsive-table div?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="width: 50px">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I am expecting it to look like this, without needing to set an explicit width on the div inside the td.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div style="width: 50px">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div class="table-responsive" style="width: 50px">
<table class="table table-bordered">
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Try this. Im not sure if you need it to be 50px wide if so just change style="width: 100%" to style="width: 50px%".
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive" style="width: 100%">
<table class="table table-striped table-bordered">
<tbody>
<tr>
<th scope="row">1</th>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
<td>Test4</td>
<td>Test5</td>
<td>Test6</td>
<td>Test7</td>
<td>Test8</td>
<td>Test9</td>
<td>Test10</td>
<td>Test11</td>
<td>Test12</td>
<td>Test13</td>
<td>Test14</td>
<td>Test15</td>
<td>Test16</td>
<td>Test17</td>
</tr>
</tbody>
</table>
</div>
Related
I'm trying to style all tbody tags except the first one but with poor results.
As you can see in the snippet, the style is applied to all elements, including the first one, where am I wrong?
div.cont_table_toggle table#general_list tbody.divider:not(:first-child) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
Try using tbody.divider:not(:first-of-type).
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
Reference : https://www.w3schools.com/cssref/sel_first-of-type.asp
https://www.w3schools.com/cssref/css_selectors.asp
Try it below.
div.cont_table_toggle table#general_list tbody.divider:not(:first-of-type) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
tbody is not the first child of the table. So the :first-child selector does not work. If you remove the thead, it works.
div.cont_table_toggle table#general_list tbody.divider:not(:first-child) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
You could use :not(#block-1), :nth-child(2), or as the other answer has suggested, :not(:first-of-type).
Use not(#block-1)
The first tbody has id that you can use. As you many know, id must unique.
tbody:not(#block-1) selects all tbodys except the first one.
#general_list tbody:not(#block-1) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</tbody>
</table>
</div>
Use :not(:nth-child(2))
#general_list tbody:not(:nth-child(2)) {
border-top: 8px solid red;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="cont_table_toggle">
<table id="general_list" class="table table-bordered">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
</tr>
</thead>
<tbody id="block-1" class="divider">
<tr>
<td>1111</td><td>2222</td>
</tr>
</tbody>
<tbody id="block-2" class="divider">
<tr>
<td>3333</td><td>4444</td>
</tr>
</tbody>
<tbody id="block-3" class="divider">
<tr>
<td>5555</td><td>6666</td>
</tr>
</table>
</div>
I just want to apply table-stripped class to my 3 colums. Totally I have 5 colums, but 3 of them needs to be stripped. Any idea for that?
For example, I only want to apply table stripped to selected area below:
You can override first td element with style="background-color: white;"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td style="background-color: white;">John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td style="background-color: white;">July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-hover table-responsive">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
Is it possible to center this table without giving the table a width other than 100%? Most of the answers I've found for doing this all give the table a width less than 100%. This isn't very nice since when you then center the element if the display is big enough the table still appears to not be centered.
Use mx-auto w-auto to horizontal center. Also, the table should be inside table-responsive...
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-hover mx-auto w-auto">
<thead>
<tr>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
https://codeply.com/go/gotnKXfdw2
You must put your table inside a div with table-responsive class like below,
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
Update:
To center table with not 100% width do like above, and give below style to your .table class.
{
width:auto;
margin:0 auto;
}
hope this works:
<div class="container table-responsive">
<table class="table table-striped table-hover ">
<thead>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
</div>
Try this code sample one directly from the bootstrap website.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table text-center">
<thead>
<tr>
<th scope="col">column1</th>
<th scope="col">column2</th>
<th scope="col">column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
</tr>
</tbody>
</table>
I'm aware of table-responsive class but it's not working here and it's breaking the UI.
My code looks like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table id="home-table">
<tr>
<td class='home-cell'>
<table class="table table-bordered">
<caption>Overview</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Last Reading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Demo 1</td>
<td>Reading: R1</td>
</tr>
</tbody>
</table>
</td>
<td class='home-cell'>
<table class="table table-bordered">
<caption>Alarms and Schedules</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dev 1</td>
<td>Scheduled 10:00 AM OFF</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
How can I achieve separate responsive horizontal scrollbars in both the tables inside the main table?
you can do it like this
<style>
.home-cell.table-responsive {
width: 150px;
overflow: auto !important;
display: inline-block;
}
table .table-bordered {
width: 190px;
min-width: 270px;
}
</style>
<table id="home-table">
<tbody>
<tr>
<td class="home-cell table-responsive">
<table class="table table-bordered">
<caption>Overview</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Last Reading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Demo 1</td>
<td>Reading: R1</td>
</tr>
</tbody>
</table>
</td>
<td class="home-cell table-responsive">
<table class="table table-bordered">
<caption>Alarms and Schedules</caption>
<thead>
<tr>
<th>Device ID</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dev 1</td>
<td>Scheduled 10:00 AM OFF</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try this, This will work
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-bordered">
<th colspan="3">Outer Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>
<table class="table table-bordered">
<th colspan="3">Inner Table</th>
<tr>
<td>This is row one, column 1</td>
<td>This is row one, column 2</td>
<td>This is row one, column 3</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
https://jsfiddle.net/DTcHh/38830/
I want my table Semester Attended to be in the left of the Grade table. How can i achieve this? Im new to html and css. Can someone give me clues to achieve this?
here's my code.
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<div id="gradetable">
</div>
</div>
Since you are using bootstrap - just use the grid system.
Create new row, add to columns (.col-X-6), and inside each column's-cell put one table.
Something like that:
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="table-responsive">
<div id="gradetable">
</div>
</div>
</div>
</div>
You can wrap both tables for each column, same row in another table.
E.g.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended Table</th>
<th>Grade Table</th>
</tr>
</thead>
<tbody>
<td>
<table id="semesterAttendedTable" class="table table-bordered">
<thead>
<tr>
<td>Semester 1</td>
<td>Semester 2</td>
<td>Semester 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
<td>
<table id="gradeTable" class="table table-bordered">
<thead>
<tr>
<td>Grade 1</td>
<td>Grade 2</td>
<td>Grade 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1,1</td>
<td>Row 1,2</td>
<td>Row 1,3</td>
</tr>
<tr>
<td>Row 2,1</td>
<td>Row 2,2</td>
<td>Row 2,3</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table
You just need to add float:left to the div with the first table.
div.semester {
float:left;
}
<div class="table-responsive semester">
<table class="table table-bordered">
<thead>
<tr>
<th>Semester Attended</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive" id="gradetable">
<table class="table table-bordered">
<thead>
<tr>
<th>Grades</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<aside></aside>
</td>
</tr>
</tbody>
</table>
</div>