How to we make the HTML table to responsive without using bootstrap or JQuery, it has more than eight-column.
I'm Using Percentage for each column even its not coming responsive when we increase the text
Scroll coming at the bottom. how to avoid scroll, I don't want to use the Unorder list or div elements
body{
font-family: arial, sans-serif;
font-size:12px
}
.text-to-right {
text-align: right;
}
.text-to-left {
text-align: left;
padding-left: 1rem;
}
table {
width: 100%;
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #f3f1f1fa;
border-spacing: 0;
}
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #d2cecefa;
/*box-shadow: 0 2px 4px 0 rgba(241, 230, 230, 0.16), 0 2px 10px 0 rgba(247, 245, 245, 0.12);*/
box-shadow: 0 1px 1px 0 #f3f1f1,0 1px 1px 0 #f3f1f1;
}
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > td:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > thead > tr > th:first-child {
border-left-width: 0;
}
.table-bordered tbody tr td:last-child,.table-bordered thead tr th:last-child {
border-right: 1px solid #f3f1f1;;
}
.table-bordered > thead > th:last-child {
border-right: 1px solid #f3f1f1;
}
th {
padding: 1rem 0;
background: #192b4b;
color: #fff;
font-size: 1.3rem;
font-weight: normal;
border-left: 1px solid #f3f1f1;
}
td {
padding: 1rem;
text-transform: capitalize;
color: #6b5e5e;
}
.table-bright-data {
color: #007dc5;
font-size: 1.8rem;
font-family: 'Roboto Condensed', Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th width="05%">
S.No
</th>
<th class="text-to-left" width="23%">Name</th>
<th width="10%">Code</th>
<th width="12%">Type</th>
<th width="10%"> Profile</th>
<th width="13%">Time</th>
<th width="10%">Size</th>
<th width="11%">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-center">
1
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">LDHSNSJ734674</td>
<td class="text-to-left">Fixed Interest </td>
<td class="text-to-left">high </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
<tr>
<td class="align-center">
2
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">DHEYE933</td>
<td class="text-to-left">Responsive layout </td>
<td class="text-to-left"> </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
</tbody>
</table>
</body>
</html>
You could collapse a table like this
CSS
#media (max-width: 1024px) {
.collapse {
display: block;
}}
HTML
<td class="collapse">
Content
</td>
<td class="collapse">
Content
</td>
I would add multiple classes with different #media (max-width: xxx) so they don't collapse all at once. How you want to collapse them, and in what order you should figur out yourself.
You can look over here https://css-tricks.com/responsive-data-tables/ if you got any more questions.
Personally I like using div over tables, e.g: http://www.responsivegridsystem.com/
Related
I want to use this table style at same page with another one, but always other one control this one, so please can you change this for me to become different style. Please would you mind to make it with a Jsfiddle example.
Here my CSS:
body {
color: #555;
font-family: 'Open Sans';
}
th {
text-align: left;
}
table {
background-color: transparent;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0 7px;
}
table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
padding: 13px;
line-height: 20px;
}
table th {
font-weight: 700;
font-size: 13px;
color: #868686;
vertical-align: bottom;
padding: 0 13px !important;
}
table td {
vertical-align: middle;
background: #fff;
border: 1px solid #eaeaea;
border-right: 0;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
transition: all .2s ease;
font-size: 13px;
}
table td:last-child {
border-right: 1px solid #eaeaea;
border-radius: 0 2px 2px 0;
}
table td:first-child {
border-radius: 2px 0 0 2px;
}
table > thead > tr > th {
vertical-align: bottom;
}
table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
border: 0;
}
table > tbody > tr:hover > td,
table > tbody > tr:hover > th {
background-color: #f7f8fb;
}
Here my HTML:
<table>
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
<tr>
<td>2</td>
<td>Obcasyn Maruszczakowy</td>
<td>maruszczak#example.com</td>
<td>No comment</td>
</tr>
<tr>
<td>3</td>
<td>Obcasyn Maruszczakowy</td>
<td>maruszczak#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>
Give them the same class (say "tables") and different ids (say "tableOne" and "tableTwo")
Declare the common css for them using their class, like table.tables{ }. For different css use their ids; like this :
table.tables#tableOne th {
color:green;
}
table.tables#tableTwo th {
color: red;
}
Here's a wokring snippet in which I give their headings different colors using their ids.
body {
color: #555;
font-family: 'Open Sans';
}
th {
text-align: left;
}
table.tables {
background-color: transparent;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: separate;
border-spacing: 0 7px;
}
table.tables > thead > tr > th,
table.tables > tbody > tr > th,
table.tables > tfoot > tr > th,
table.tables > thead > tr > td,
table.tables > tbody > tr > td,
table.tables > tfoot > tr > td {
padding: 13px;
line-height: 20px;
}
table.tables th {
font-weight: 700;
font-size: 13px;
color: #868686;
vertical-align: bottom;
padding: 0 13px !important;
}
table.tables td {
vertical-align: middle;
background: #fff;
border: 1px solid #eaeaea;
border-right: 0;
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);
transition: all .2s ease;
font-size: 13px;
}
table.tables td:last-child {
border-right: 1px solid #eaeaea;
border-radius: 0 2px 2px 0;
}
table.tables td:first-child {
border-radius: 2px 0 0 2px;
}
table.tables > thead > tr > th {
vertical-align: bottom;
}
table.tables > caption + thead > tr:first-child > th,
table.tables > colgroup + thead > tr:first-child > th,
table.tables > thead:first-child > tr:first-child > th,
table.tables > caption + thead > tr:first-child > td,
table.tables > colgroup + thead > tr:first-child > td,
table.tables > thead:first-child > tr:first-child > td {
border: 0;
}
table.tables > tbody > tr:hover > td,
table.tables > tbody > tr:hover > th {
background-color: #f7f8fb;
}
table.tables#tableOne th {
color:green;
}
table.tables#tableTwo th {
color: red;
}
<table class="tables" id="tableOne">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>
<table class="tables" id="tableTwo">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Email</th>
<th>Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td width="20">1</td>
<td>Obcasyn Maruszczak</td>
<td>obcasyn#example.com</td>
<td>No comment</td>
</tr>
</tbody>
</table>
I have a problem with my table cell width. On Chrome it works perfectly, but on Firefox it looks a lot different and I don't whats causing it.
This is the chrome one, looking perfect:
This is the Firefox one, being squeezed tight:
Any idea why this is? Heres my code.
/* Latest games */
.lp-latestgames {
height: 466px;
}
.lp-latestgames .title {
margin-left: 460px;
margin-top: 56px;
margin-bottom: 21px;
}
.lp-latestgames .table {
margin-bottom: 0;
}
.lp-latestgames .table thead {
background-color: rgba(0, 0, 0, 0.45);
}
.lp-latestgames .table thead th {
font-size: 16px;
font-weight: 500 !important;
color: white;
height: 49px;
vertical-align: middle;
}
.lp-latestgames .table thead > tr > th { border-bottom: none; }
.lp-latestgames .table tbody > tr > td {
height: 81px;
border-top: 2px solid #111316;
background-color: rgba(0, 0, 0, 0.19);
vertical-align: middle;
font-size: 14px;
font-weight: 500;
color: white;
}
.lp-latestgames .table tbody > tr:first-child > td { border-top: none; }
.lp-latestgames .table tbody > tr > td:first-child,
.lp-latestgames .table thead > tr > th:first-child{
/* ÜBERARBEITEN!!!!! */
padding-left: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td:last-child,
.lp-latestgames .table thead > tr > th:last-child{
/* ÜBERARBEITEN!!!!! */
padding-right: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td > .gd-c-versus {
display: block;
font-weight: normal;
font-family: Arial;
color: #494949;
}
.lp-latestgames .table thead > tr > th:nth-child(4),
.lp-latestgames .table thead > tr > th:nth-child(5),
.lp-latestgames .table tbody > tr > td:nth-child(4),
.lp-latestgames .table tbody > tr > td:nth-child(5) {
text-align: center;
}
<div class="lp-latestgames">
<!-- Games -->
<table class="table">
<thead>
<tr>
<th>Name <img src="img/gd_content_arrow_dn.png"></th>
<th>Price Pool <img src="img/gd_content_arrow_dn.png"></th>
<th>Entry <img src="img/gd_content_arrow_dn.png"></th>
<th>Avg Skill <img src="img/gd_content_arrow_dn.png"></th>
<th>Time Remaining <img src="img/gd_content_arrow_up.png"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Im bored. Fite me<span class="gd-c-versus">1 vs 1</span></td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><img src="img/gd_content_coin.png"> 10</td>
<td><input type="text" value="730" class="circle"></td>
<td>00:00:32</td>
</tr>
<tr>
<td>EG vs LGD - Wild Cards Entry<span class="gd-c-versus">5 vs 5</span></td>
<td><img src="img/gd_content_coin.png"> 1.500.000</td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><input type="text" value="980" class="circle"></td>
<td>00:01:47</td>
</tr>
<tr>
<td>cyka blyat<span class="gd-c-versus">5 vs 5</span></td>
<td><img src="img/gd_content_coin.png"> 20</td>
<td><img src="img/gd_content_coin.png"> 10</td>
<td><input type="text" value="730" class="circle"></td>
<td>00:02:4</td>
</tr>
</tbody>
</table>
</div>
Have you declared <!DOCTYPE> in your html page, if not give it a try. This doctype is an instruction to the web browser about what version of HTML the page is written in.
Try adding this:
.table { table-layout: fixed }
See snippet
See POST
/* Latest games */
.lp-latestgames {
height: 466px;
}
.lp-latestgames .title {
margin-left: 460px;
margin-top: 56px;
margin-bottom: 21px;
}
.lp-latestgames .table {
margin-bottom: 0;
table-layout: fixed; /*<<<===== ADD THIS RULE RIGHT HERE */
}
.lp-latestgames .table thead {
background-color: rgba(0, 0, 0, 0.45);
}
.lp-latestgames .table thead th {
font-size: 16px;
font-weight: 500 !important;
color: white;
height: 49px;
vertical-align: middle;
}
.lp-latestgames .table thead > tr > th {
border-bottom: none;
}
.lp-latestgames .table tbody > tr > td {
height: 81px;
border-top: 2px solid #111316;
background-color: rgba(0, 0, 0, 0.19);
vertical-align: middle;
font-size: 14px;
font-weight: 500;
color: white;
}
.lp-latestgames .table tbody > tr:first-child > td {
border-top: none;
}
.lp-latestgames .table tbody > tr > td:first-child,
.lp-latestgames .table thead > tr > th:first-child {
/* ÜBERARBEITEN!!!!! */
padding-left: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td:last-child,
.lp-latestgames .table thead > tr > th:last-child {
/* ÜBERARBEITEN!!!!! */
padding-right: 460px;
max-width: 200px;
}
.lp-latestgames .table tbody > tr > td > .gd-c-versus {
display: block;
font-weight: normal;
font-family: Arial;
color: #494949;
}
.lp-latestgames .table thead > tr > th:nth-child(4),
.lp-latestgames .table thead > tr > th:nth-child(5),
.lp-latestgames .table tbody > tr > td:nth-child(4),
.lp-latestgames .table tbody > tr > td:nth-child(5) {
text-align: center;
}
<div class="lp-latestgames">
<!-- Games -->
<table class="table">
<thead>
<tr>
<th>Name
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Price Pool
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Entry
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Avg Skill
<img src="img/gd_content_arrow_dn.png">
</th>
<th>Time Remaining
<img src="img/gd_content_arrow_up.png">
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Im bored. Fite me<span class="gd-c-versus">1 vs 1</span>
</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<img src="img/gd_content_coin.png">10</td>
<td>
<input type="text" value="730" class="circle">
</td>
<td>00:00:32</td>
</tr>
<tr>
<td>EG vs LGD - Wild Cards Entry<span class="gd-c-versus">5 vs 5</span>
</td>
<td>
<img src="img/gd_content_coin.png">1.500.000</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<input type="text" value="980" class="circle">
</td>
<td>00:01:47</td>
</tr>
<tr>
<td>cyka blyat<span class="gd-c-versus">5 vs 5</span>
</td>
<td>
<img src="img/gd_content_coin.png">20</td>
<td>
<img src="img/gd_content_coin.png">10</td>
<td>
<input type="text" value="730" class="circle">
</td>
<td>00:02:4</td>
</tr>
</tbody>
</table>
</div>
Try to set th or td width using rem instead of px
Each rem equals 16px
I have an HTML table with another table embedded in it like:
table.index {
border-radius: 10px;
border: solid 1px #61a2d1;
border-spacing: 0;
}
table.index > thead > tr:first-child {
background-color: #61a2d1;
}
table.index > thead > tr:first-child > td:first-child {
border-top-left-radius: 10px;
}
table.index > thead > tr:first-child > td:last-child {
border-top-right-radius: 10px;
}
table.index > thead td {
font-weight: bold;
text-align: center;
}
table.index > tr:nth-child(3) {
background-color: rgba(97, 162, 209, 0.5);
}
table.index > tr:hover {
background-color: #ffda6d;
}
table.index > tbody > tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table.index > tbody > tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
table.index .no-right-borrder {
border-right: none;
}
table.index .no-left-border {
border-left: none;
text-align: right;
}
table.details {
margin: 0;
padding: 0;
border: solid 1px #61a2d1;
border-spacing: 0;
}
<table class="index" style="width:100%">
<thead>
<tr>
<td style="width:2%"></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="no-right-borrder" style="vertical-align:middle"><span class="fa fa-caret-right fa-lg"></span></td>
<td class="no-left-border" style="text-align:left;"></td>
<td class="no-right-borrder" style="text-align:center"></td>
<td class="no-left-border"></td>
</tr>
<tr>
<td colspan="4" style="padding:0;margin:0">
<table class="details" style="width:100%">
<tbody>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
When I open this page, the cells in the table with the class details have rounded corners just like the cells in the table with the class index.
I've used the direct child selector to indicate that I only wanted the routed borders to be applied to direct children of a table with the index class, so I'm not sure why it's happening. When I examine the DOM in Google Developer Tools, it tells me that the border-radius attribute is coming from the .index class. What do I need to do to stop that from happening?
edit: This is what I'm seeing on my local machine. CSS code is copied exactly from my code. Table was simplified because it's auto-generated, but the classes are applied identically.
I suspect you need to change table.index > tbody > tr:last-child td:first-child into table.index > tbody > tr:last-child > td:first-child (putting the direct descendant selector between tr > td), and the same for the td:last-child selector that directly follows.
I'd like to have a table that has the text in the middle of a cell. But the text inside the cell and the heading all need to be left or right aligned to the other text in the other cells.
The reason I need the text in the center of the cell is because some of the table cells get highlighted and it looks a bit silly having the text sitting on the edge.
Have a look at the image below to see what I mean:
Here's a JSfiddle:
http://jsfiddle.net/php58knw/1/
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>$1</title>
</head>
<style type="text/css">
table {
max-width: 100%;
background-color: white;
}
th {
text-align: left;
}
.table {
width: 100%;
margin-bottom: 10px;
}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {
padding: 20px;
line-height: 20px;
vertical-align: top;
border-top: 1px solid black;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid black;
}
.table > caption + thead > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid black;
}
.table .table {
background-color: white;
}
.table-condensed > thead > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > th,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > th,
.table-condensed > tfoot > tr > td {
padding: 10px;
}
.table-bordered {
border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > tfoot > tr > td {
border: 1px solid black;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: green;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: orange;
}
table col[class*="col-"] {
position: static;
float: none;
display: table-column;
}
table td[class*="col-"],
table th[class*="col-"] {
position: static;
float: none;
display: table-cell;
}
.table-number {
text-align: left;
font-weight: 600;
font-size: 14px;
color: #545454;
}
.table-heading {
text-align: left;
color: red;
font-size: 30px;
}
table.table {
margin-top: 20px;
color: #3c3c3c;
table-layout: fixed;
}
table.table thead tr th {
text-align: center;
font-weight: 400;
}
table.table tbody tr td {
border: none;
color: #989898;
border-top: none;
line-height: 2;
}
table.table tbody tr td:first-child {
color: #000;
text-align: right;
}
table.table tbody tr td.num, table.table tbody tr td.perc, table.table tbody tr td.curr {
font-family: "Roboto";
font-weight: 400;
text-align: center;
}
table.table tbody tr td.num.highlight, table.table tbody tr td.perc.highlight, table.table tbody tr td.curr.highlight {
background-color: #ff8080;
text-shadow: 0.5px 0.866px 1px rgba(0, 0, 0, 0.25);
color: #FFF;
}
table.table tbody tr td.num.highlight-alt, table.table tbody tr td.perc.highlight-alt, table.table tbody tr td.curr.highlight-alt {
background-color: #8080ff;
text-shadow: 0.5px 0.866px 1px rgba(0, 0, 0, 0.25);
color: #FFF;
}
</style>
<div class="table-container">
<div class="table-number">Table 1:</div>
<div class="table-heading">Developed world tobacco industry: 1973-2010</div>
<table class="table">
<thead>
<tr>
<th></th>
<th>Volume p.a.</th>
<th>Real price p.a.</th>
<th>Real revenue p.a.</th>
<th>Real GDP p.a.</th>
<th>Period</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td class="perc">-1.5%</td>
<td class="perc">3.4%</td>
<td class="perc">1.9%</td>
<td class="perc">2.8%</td>
<td class="num">1,973</td>
</tr>
<tr>
<td>Australia</td>
<td class="perc">-1.9%</td>
<td class="curr highlight">$9,999.00</td>
<td class="curr">R5,000.00</td>
<td class="curr">R5,000.00</td>
<td class="num">1,973</td>
</tr>
<tr>
<td>UK</td>
<td class="perc">-1.0%</td>
<td class="perc">3.0%</td>
<td class="perc">1.3%</td>
<td class="perc highlight-alt">2.0%</td>
<td class="num">1,988</td>
</tr>
<tr>
<td>Average</td>
<td class="perc highlight">-1.4%</td>
<td class="perc highlight">3.6%</td>
<td class="perc">1.8%</td>
<td class="perc">2.7%</td>
<td class="num">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
try
table.table tbody tr td.perc, table.table tbody tr th,
table.table tbody tr td.num, table.table tbody tr td.curr {
text-align: right;
padding-right: 5%;
}
http://jsfiddle.net/n20h0vdL/
I'm trying to remove the borders on a specific table:
<table class="teacher">
<tr>
<td>row 1</td>
<td>col 1</td>
<td>col 2</td>
</tr>
<tr>
<td>row 2</td>
<td>col 1</td>
<td>col 2</td>
</tr>
</table>
You can see my fiddle here
I think the bootstrap.css is competing with my site.css but I'm not sure how to get rid of the borders?
Here is my teacher (from site.css) styling:
.teacher {
text-align: left;
padding: 0;
}
.teacher table {
border: none !important;
border-collapse:collapse !important;
}
.teacher .contentLabel {
width: 45%;
}
.teacher input {
width: 10px;
padding: 0px;
}
.teacher textarea {
width: 225px;
padding: 0px;
}
My bundle:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/site.css",
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/bootstrap-duallistbox.css",
"~/Content/jquery.dataTables.css"));
I think this is what is causing this issue from bootstrap:
.table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #ddd;
}
.table > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
border-top: 0;
}
.table > tbody + tbody {
border-top: 2px solid #ddd;
}
.table .table {
background-color: #fff;
}
Comment out the border for <td> in Line 94.
td {
color: #000;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
text-align: left;
}
Additional pieces of CSS to keep in mind if you ever use <thead> and <th> elements for tables:
Line 103:
th {
color: #7c7c7b;
font-weight: 700;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}
Line 112:
th.th2 {
color: #7c7c7b;
font-weight: 300;
font-size: large;
text-align: center;
/* border: 1px solid #7c7c7b; */
padding: .3em 1em;
}
Well on line 90 in the CSS of the jsfiddle you provided is
td {
color: #000;
border: 1px solid #7c7c7b;
padding: .3em 1em;
text-align: left;
}
that is what is causing the borders..
So the rule is on the td elements and not the table
Using
.teacher td{border:none;}
should solve it..
Demo at http://jsfiddle.net/gaby/R6X2M/2/