I created a table like this:
<table class="table table-without-margin">
<thead>
...
</thead>
<tbody>
<tr ng-show="row.sprint == undefined "
ng-repeat="row in rowCollectionUserStories | orderBy:sortType:sortReverse |filter:search"
ng-class="row.selectedCell ? 'cellSelectedClass' : ''">
<td data-ng-click="viewDetailsUserstory(row)" class="table-cell05">{{row.voters.length}}</td>
<td data-ng-click="viewDetailsUserstory(row)" class="table-cell23">#{{row.num}} {{row.subject}}</td>
</tr>
</tbody>
</table>
And in the css:
.panel-body-backlog-userstories-list .table {
border-bottom:0px !important;
}
.panel-body-backlog-userstories-list .table th, .table td {
border: 1px !important;
}
.panel-body-backlog-userstories-list .fixed-table-container {
border:0px !important;
}
.panel-body-backlog-userstories-list table tr:hover,
.panel-body-backlog-userstories-list table tr:focus,
.panel-body-backlog-userstories-list table tr:active
{
background:rgba(229, 249, 255, 0.45);
border:none;
}
It works, but when I select column and row, it shows me its edges.
How could I delete them?
Thank you very much.
Related
i'm having a weird behavior for the table's data , it's not aligned at all , how can i solve this problem ? is there a way to specify the column width and to start the text from the same position ?
see the table below
table
here is my code that contains the table head :
const HospitalsList = (props) => (
<div className="content-container">
<div className="header__content">
<h1>Hospitals List</h1>
</div>
<HospitalsListFilters />
<AddHospitalPage/>
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
</table>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id}{...hospital} />
})}
</div>
)
and here is the code for the table data :
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<div>
<table className="content-table">
<tbody>
<tr>
<Link to ={`/edit/${id}`}>
<td>{name}</td>
</Link>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
</tbody>
</table>
</div>
here is the css file :
.content-table {
border-collapse: collapse;
font-size: larger;
min-width: 1200px;
max-width: 1400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0,0,0,0.15);
margin-left: $l-size;
thead tr {
th{
padding : 12px 15px;
}
background-color: teal;
color: white;
font-weight: bold;
}
td {
padding : 12px;
}
tbody tr {
border-bottom: 1px solid #dddddd;
}
tbody tr:last-of-type{
border-bottom: 2px solid #dddddd;
}
}
You are creating a new table for every row. Instead, you should .map inside the main table (within the tbody element):
<table className="content-table">
<thead>
<tr>
<th>Hospital Name</th>
<th>Province</th>
<th>Sector</th>
<th>No of OR</th>
<th>No of Beds</th>
</tr>
</thead>
<tbody>
{props.hospitals.map((hospital) => {
return <HospitalListItem key={hospital.id} {...hospital} />
})}
</tbody>
</table>
Then change HostpitalListItem to only render a table row:
const HospitalListItem =({id, name, province, sector, noOfOR, noOfBeds,lastUpdate, dispatch}) => (
<tr>
<td><Link to={`/edit/${id}`}>{name}</Link></td>
<td>{province}</td>
<td>{sector}</td>
<td>{noOfOR}</td>
<td>{noOfBeds}</td>
</tr>
)
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
This is the result I would like to get:
And this is what I am getting:
And this is the code I have:
.chart-table {
th, td {
text-align: center;
width: 25%;
}
tr:nth-child(even) > td {
background-color: $softer-beige;
}
tr:nth-child(odd) > td {
background-color: $soft-beige;
}
}
What am I doing wrong?
UPDATE
What I as asking here was very clear.
If you don't know the answer, you don't have why to to downvote my question. Don't be that kind of person.
Well you actually need 3 colors and you need to use :nth-child on the td as well.
.chart-table{width:300px;height:300px;}
.chart-table th,
.chart-table td {
text-align: center;
width: 25%;
background-color: #f5f5dc;
}
.chart-table tr:nth-child(even)> td:nth-child(odd),
.chart-table tr:nth-child(odd) > td:nth-child(even){
background-color: #dcdcc6;
}
/*instersection of darker row and column*/
.chart-table tr:nth-child(even) > td:nth-child(even){
background-color: #c4c4b0;
}
<table class="chart-table">
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td>4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<td>5.4</td>
</tr>
<tr>
<td>6.1</td>
<td>6.2</td>
<td>6.3</td>
<td>6.4</td>
</tr>
</table>
How to remove all (especially outer ones) borders from bootstrap table? Here is a table without inner borders:
HTML
<style>
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
</style>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
</row>
http://jsfiddle.net/sba7wkvb/1/
Which CSS styles need to be overriden to remove all borders?
In this case you need to set the border below the table and the borders around - table header, table data, table container all to 0px in-order to totally get rid of all borders.
.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
<br/>
<table data-toggle="table" data-striped="true">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td>F</td>
</tr>
</tbody>
</table>
</div>
<div class="col-xs-1"></div>
If you are using bootstrap this will help you:
<table class="table table-borderless">
you can set classes option to table table-no-bordered, example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/no-bordered.html.
Edit: this feature is only supported in develop version(after v1.7.0): https://github.com/wenzhixin/bootstrap-table/tree/master/src.
Try this:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
.table th {
border-bottom: none !important;
}
.table:last-child{
border:none !important;
}
Demo JSFiddle
Using Bootstrap
In html
<table class="table no-border">
In css
.table.no-border tr td, .table.no-border tr th {
border-width: 0;
}
Source: https://codepen.io/netsi1964/pen/ogVQqG
Change the border size in the CSS for the .fixed-table-container
CSS:
.table th, .table td {
border-top: none !important;
border-left: none !important;
}
.fixed-table-container {
border:0px;
}
http://jsfiddle.net/sba7wkvb/3/
html
<table class="table noborder">
css
.noborder td, .noborder th {
border: none !important;
}
for remove outer border you should remove border from .fixed-table-container as follow :
.fixed-table-container{border: 0px;}
You need set border: none !important; to .fixed-table-container and .table. Also set border-bottom: none !important; to your first rule, .table th, .table td.
Updated Fiddle: http://jsfiddle.net/sba7wkvb/5/
It's simple, Kindly add the below code in your CSS sheet.It will remove all the borders in the table
.table th, .table td, .table {
border-top: none !important;
border-left: none !important;
border-bottom: none !important;
}
.fixed-table-container {
border:0px;
border-bottom: none !important;
}
Hope helped.
If you are using CSS3 this will help you:
.table tbody tr td, .table tbody tr th {
border: none;
}
Is it not possible to style a <table> and its <tr> <td> using css classes?
For example:
<table class="calendar_table">
<tr>
<td>
<h2>Datum</h2>
</td>
<td>
<h2>Event</h2>
</td>
<td>
<h2>Type</h2>
</td>
</tr>
</table>
Then using something like this CSS:
.calendar_table {
width:880px;
}
.calendar_table tr {
margin:0;
padding:4px;
}
It is possible, it should work properly!
Here is an example
Have fun, you can do whatever you want! I don't recommend using <table>though, unless it is used to present structured data that is meant to be in a table. If it is to draw a layout, use <div> and CSS!
As Aleks wrote, I would define css for the table itself too. But no nested brackets in css definition like: table.custom_class { ... td, th { ... } }.
<table class="custom_class">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Giovanni</td>
<td>Rovelli</td>
</tr>
<tr>
<td>Roland</td>
<td>Mendel</td>
</tr>
</table>
The following CSS example can be used:
table.custom_class {
border:solid 5px #006CFF;
margin:0px;
padding:0px;
border-spacing:0px;
border-collapse:collapse;
line-height:22px;
font-size:13px;
font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
font-weight:400;
text-decoration:none;
color:#0018ff;
white-space:pre-wrap;
}
table.custom_class th {
padding: 20px;
background-color:#98dcff;
border:solid 2px #006CFF;
}
table.custom_class td {
padding: 20px;
border:solid 1px #006CFF;
}
table.custom_class tr {
margin:0;
padding:4px;
}
You can see it in action https://jsfiddle.net/16L9h2ft/
Yes, it's possible. What you have is working to some extent (with tweaks).
To style the td, use:
.calendar_table td {
}
Or:
.calendar_table tr td {
}
will also work.
For setting attributes such as borders, colors, and sizes this is the cleaner way to do it, over embedding that information in HTML.
This approach is great with data tables where the information naturally should be presented in a table. If you are laying out data use more semantically correct tags such as <div> and <span>.
The answers above are either old, or not answered properly, as they are ignoring the styling of the table itself and not just td or th etc. elements.
If we would have a table like this:
<table class="custom_class">
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>row value 1</td>
<td>row value 2</td>
</tr>
</tbody>
</table>
Then in .css we should put:
table.custom_class {
border: 1px solid black;
td, th {
color: blue;
}
}
Table rows don't take padding, TDs do.
Change your style to:
.calendar_table td {
margin:0;
padding:4px;
}
Tables expand if necessary to let content fit
As far as I know, table rows do not have margin or padding
These layout rules apply no matter how you set it.
Nice looking green table theme :
https://jsfiddle.net/sujayun/qwsLk3aL/
table.namTblCls
{
color:purple;
border: #004400 4px solid;
border-collapse: collapse;
font-size:16px;
}
table.namTblCls th
{
text-align: center;
color:yellow;
background-color:#008800;
border: #004400 2px solid;
padding: 20px;
}
table.namTblCls td
{
text-align: center;
padding: 20px;
border: #004400 1px solid ;
border-right-width: 2px;
border-left-width: 2px;
}
table.namTblCls tr:nth-child(odd)
{
background-color: #DDFFDD;
}
table.namTblCls tr:nth-child(even)
{
background-color: #BBFFBB;
}