I had a table in which fields are editable.The problem is when i edit a field then the remaining fields are moving out of table.I put a screen shot below
Can any one suggest help please.
My Html
<table class="table table-hover">
<thead>
<tr>
<th class="hidden-xs-down">#</th>
<th>Account Name</th>
<th class="hidden-xs-down">Phone</th>
<th class="hidden-xs-down">Account Name ALias</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor = 'let student of students'>
<td class="hidden-xs-down">1</td>
<td contenteditable="true">
<a>{{student.accountname}}</a>
</td>
<td contenteditable="true" style="max-width:300px;" class ='phone'>
{{student.phone}}
</td><i class = 'glyphicon glyphicon-pencil'></i>
<td contenteditable="true">
{{student.accountownername}}
</td>
<td>
</tr>
</tbody>
</table>
You cannot directly set max-width on a td element. You can set width or maybe truncate the string with:
.truncate {
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Related
I'm trying to add vertical lines to my table that aligns with the headers and I'm using 'border-collapse: separate' as well as colspan that varies from 1 to any number. Here is an image to imagine it
Keeping in mind Cell1 has colspan of 3 and cell 2 has colspan of 2
but I would like to keep the separate border collapse for the view. My approach was to put two tables above each other one for the data with opacity:70% for example to show the table below it and the table below it should have the vertical lines with each header. However, I'm unable in anyway to put two tables in the same position.
<div id="app">
<h2>Todos:</h2>
<ol>
<table
BORDER
>
<thead>
<tr>
<th >
H1
</th>
<th
>
H2
</th>
<th
>
H3
</th>
<th
>
H4
</th>
<th
>
H5
</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</ol>
</div>
Here is a fiddle of the table
http://jsfiddle.net/vrL9s7ft/6/
I have attached a working example here http://jsfiddle.net/whjnt5o2/1/
th, td {
border: 1px solid black;
box-sizing: border-box;
height: 100px;
width: 100px;
text-align: center;
}
table{
border-spacing: 0;
}
table.background-table{
position: absolute;
}
table.background-table th, table.background-table td {
border: 1px dashed gray;
top: 0;
}
<div>
<table class="background-table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tbody>
</table>
<table>
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
</tr>
</thead>
<tbody>
<td colspan="3">
Cell1
</td>
<td colspan="2">
Cell2
</td>
</tbody>
</table>
</div>
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
I am trying to get a button that I put in a table <th> to expand the full width and height of the header column, even when a table cell in the same column is larger than the text. If I do, width 100% in css, then the button will just match the cell size, and then the title will extend beyond the button and header.
I am using the button so when the user click on it the column will sort.
This is my code just trying to do with width:
<th><button onclick="tableColumnSort(this)" style="width:100%">#descriptor.Name</button></th>
And this is how it looks without using width:
<th><button onclick="tableColumnSort(this)">#descriptor.Name</button></th>
If you set an element to width: 100% or height: 100%, it's relative to its parent element. So, if you're setting your button width: 100%, and you want it to be 100% of your header width, set a width (that's not in percentage) on the header and it'll respect it. Like this:
HTML:
<table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th>
<button>shortHeader</button>
</th>
<th>
<button>veryLongLongHeader</button>
</th>
<th>
<button>header</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
CSS:
button {
width: 100%;
}
th {
width: 100px;
}
table, th, td {
border: 1px solid #000;
}
Check out this fiddle.
Change css of the clicked th with your js, with a low gray background (#ccc it's good) and change font-size a bit, 1 or 2px. TL;DR Change the frontend to show a more elegant th with the users interactions
<table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table><table>
<thead>
<tr>
<th onclick="tableColumnSort(this); changeTH(this);">
shortHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
veryLongLongHeader
</th>
<th onclick="tableColumnSort(this); changeTH(this);">
header
</th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
On JS:
function changeTH(container){
var ths = document.getElementsByTagName('th');
var totalThs = ths.length;
//reset all ths before set your new th style
for (i = 0; i < totalThs; i++){
ths[i].style.background = '#fff';
ths[i].style.fontSize = 'inherit';
}
container.style.background = '#ccc';
container.style.fontSize = '12px'; //or other size you prefer
}
The better way to do this is add all listeners inside a js file, it's more elegant, but my example works fine.
Make your buttons display: block.
table, th, td { border-collapse: collapse; border: 1px solid #333; }
th button { display: block; width: 100%; }
<table>
<thead>
<tr>
<th><button>DELETE</button></th>
<th><button>PARTNO</button></th>
<th><button>DLT</button></th>
<th><button>TCOUNT</button></th>
<th><button>TRANS</button></th>
</tr>
</thead>
<tbody>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
<tr><td></td><td>3</td><td>20170315</td><td>1</td><td>R</td></tr>
</tbody>
</table>
I have a Chrome table problem as I try make fluid height all rows equals height in standard height table, Firefox is working fine!
https://jsfiddle.net/vdt745er/
table {
height:300px;
border:1px solid #000;
line-height:1;
border-collapse: collapse;
border-spacing: 0;
}
table td, table th{
border:1px solid #000;
padding: 0;
}
<table width="100%" cellpadding="0">
<thead>
<tr>
<td colspan="3" scope="col"> </td>
</tr>
</thead>
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Any help appreciated
You've hit a bug in chrome. To work around it, remove the thead and tbody tags.
Edit: chrome bug is https://crbug.com/708345 (cells in thead/tfoot don't receive extra height distribution)
How can I hover just one cell of a table? I don't want to hover all of the row. Here is my table HTML:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="4">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" colspan="1" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="3">asd</td>
</tr>
Note: I'm using Bootstrap for the hover.
(I don't mind if the problem can be fixed without using Bootstrap.)
Try this
table td:hover{
background-color: magenta;
}
then remove the class table-hover here <table class="table table-hover table-bordered">
You need to overwrite bootsrap rules with a selector strong enough : see specifity.
Seems to be tr:hover to reset here first :
.table.table-hover.table-bordered tr:hover {/* selector strong enough to overwrite bootsrap rule */
background:none;/* remove bg */
}
Then apply the rule you need to your tds, using any attributes used here (class, id, colspan, rowspan, ...)
.table.table-hover.table-bordered tr:hover {
background: none;
}
td:hover {
background: lightgray;
}
/* a few selector examples */
td[colspan]:hover {
background: lime;
}
td[colspan] + td[colspan]:hover {
background:turquoise;
}
td[colspan="2"]:hover {
background: gold;
}
td[rowspan]:hover {
background: tomato;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="3">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="2">asd</td>
</tr>
</table>
Notice: i updated the table code about rowspan and colspan values (colspan="1" doesn't even nedd to be set, it is defaut value)
Apply the formatting to the TD element.
.table td:hover{
background-color: green;
}
that should do the trick...
table tr td:hover{
background-color:red;
}
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="danger" colspan="4">Comprobante de Pago</th>
</tr>
</thead>
<tr>
<td class="warning" width="10%">Fecha:</td>
<td colspan="2" id="vertical_align">sdf</td>
</tr>
<tr>
<td rowspan="3" colspan="1" class="asd">Client</td>
<td colspan="1">NAME</td>
<td colspan="1">NAME 2</td>
</tr>
<tr>
<td colspan="2">asd</td>
</tr>
<tr class="info">
<td colspan="3">asd</td>
</tr>
</table>
you can use important.
.table td:hover{
background-color: red !important;
}