I'm displaying a table from my database to my view.
#model IEnumerable<test1.Models.Malfunction>
#{
ViewBag.Title = "Malfunctions";
}
<h2>Malfunctions</h2>
<table id="customers" class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>Description</th>
<th>Date Reported</th>
<th>Customer</th>
<th>Movie</th>
</tr>
</thead>
<tbody>
#foreach (var malfunction in Model)
{
<tr>
<td>#malfunction.Id</td>
<td>#malfunction.ReportDescription</td>
<td>#malfunction.DateReported</td>
<td>#malfunction.Customer</td>
<td>#malfunction.Movie</td>
</tr>
}
</tbody>
</table>
This property:
<td>#malfunction.ReportDescription</td>
can contain a big amount of text which if too long will overlap the next property in line which is:
<td>#malfunction.DateReported</td>
What I want to do is break the line after the width of the cell is reached so it doesn't overlap with the text in DateReported.
Add:
td {
word-break: break-all;
}
Fiddle
Related
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
I have a nested table as follows -
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Requirement - Only TEXTA and TEXTB should be colored in red. In real scenario there are many rows. I want only the first td of each row in the parent table to be colored. I am doing something like -
table.parent td:nth-of-type(1):not(table.nested td){
color: red;
}
This is not giving me any result. What is the correct way of achieving this?
Spent a while playing around with this. The best I can do is to suggest using 2 lines of CSS rather than 1. One selector to do all of the first row of td and one to set the nested ones back to how they belong.
table.parent tr:first-child td {
color: red;
}
table.nested tr:first-child td {
color: black;
}
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<tbody>
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
You said that..
I want only the first td of each row in the parent table to be colored
So, I am assuming you want TEXTA and TEXTC to be colored (and not TEXTB as you stated).
If thats the case, then your idea was to select elements (first td of each row) if they dont contain a specific child element (table.nested).
This is not possible with CSS2 or CSS3.
The CSS2 and CSS3 selector specifications do not allow for any sort of parent selection.
See CSS selector - element with a given child
Edit
You can use jquery/javascript to do so.
For example, to add opacity and color css properties:
$(document).ready(function(){
$('table.parent > tbody > tr > td:first-child').each(function(){
if ($(this).has('table.nested').length == 0){
$(this).css('opacity', '0.5');
$(this).css('color', 'red');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table parent">
<tbody>
<tr>
<td>TEXTA</td>
<td>TEXTB</td>
</tr>
<tr>
<td>Has nested table below
<table class="table nested">
<thead>
<th>S.No.</th>
<th>Name</th>
<th>Contact</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>ABC</td>
<td>PQR</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>TEXTC</td>
<td>TEXTD</td>
</tr>
</tbody>
</table>
Just give some class to TEXTA & TEXTB
for example:
(html)
<td class="red-color-text">TEXTA</td>
<td class="red-color-text">TEXTB</td>
(css)
.red-color-text{color: red;}
I am trying to center span in tbody, but I am not sure how to do that and I don't know if this structure is valid if I don't include a tr and td elements.
html
<table class="table">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<div><span>You haven’t added any data yet</span></div>
</tbody>
</table>
css
tbody div {
display: table-row;
}
tbody div span{
display: block;
text-align: center;
width: 100%;
}
Use colspan:
<table class="table">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">You haven’t added any data yet</td>
</tr>
</tbody>
</table>
By convention you should include tr and th as well within tbody
You can use colspan to merge columns and text-align:center style to center text.
<table class="table" style="width:100%">
<thead>
<tr>
<th>Rank</th>
<th>
<div>Name</div>
</th>
<th>
<div>Age</div>
</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4" style="text-align: center;">You haven’t added any data yet</td>
</tr>
</tbody>
</table>
I was trying to set up a table with a fixed header which works fine on all tables except the admin table.
showntable:
<div class="table-responsive">
<table class="table table-bordered" id="showntable">
<thead>
<tr>
<th> Business Unit</th>
<th> Product Group</th>
<th> Device</th>
<th> Serial number</th>
<th> Location</th>
<th> Available?</th>
<th> Condition</th>
<th> Calibration Date</th>
<th> Info</th>
<th> Book</th>
</tr>
</thead>
<tbody id="contents">
<?php echo fill_table($connect); ?>
</tbody>
</table>
</div>
bookedtable:
<div class="table-responsive">
<table class="table table-bordered" id="bookedtable">
<thead>
<tr>
<th>Type</th>
<th>Serial Number</th>
<th>From</th>
<th>Until</th>
<th>Edit Comment</th>
<th>Edit Booking</th>
</tr>
</thead>
<tbody>
<?php echo fill_book($connect); ?>
</tbody>
</table>
</div>
admintable:
<div class="table-responsive">
<table class="table table-bordered" id="admintable">
<thead>
<tr>
<th>Business Unit</th>
<th>Product Group</th>
<th>Device</th>
<th>Serial Number</th>
<th>Condition</th>
<th>Calibration Date</th>
<th>Comment</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php echo fill_admin($connect); ?>
</tbody>
</table>
</div>
CSS:
thead {
display: table;
width: calc(100% - 17px); /* -17px because of the scrollbar width */
}
tbody {
display: block;
max-height: 55vh;
overflow-y: scroll;
}
#showntable th, #showntable td {
width: 10%;
overflow-x:scroll;
}
#bookedtable th, #bookedtable td {
width: 10%;
overflow-x:scroll;
}
#admintable th, #admintable td {
width:10%;
overflow-x:scroll;
}
th {
text-align: center;
}
td {
text-align: center;
}
The #showntable consists of 10 columns, the #bookedtable of 6 and the #admintable of 8 columns. Somehow the width of 10%
for the th and td of the former two seem to work and take up the entire width but the admin table only seems to broaden
when I put the width as 1% for some reason. The thead is correct but the td seems to make problems.
How can I make the admin table the same size?
Also when I resize the browser window to be smaller the columns don't stay the same size. Do you know how to fix these issues?
Cheers
Edit:
Js Fiddle: http://jsfiddle.net/d7crasvh/23/
Its looks fine in Firefox but in IE and Edge it has some issues... :(
Instead of the admin table being wonky as described in the problem it's now the shown table that looks wrong. also the tables are all not aligned, the header and the body i mean
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;
}
I have an HTML table and I want to hide a column if all the tds of the column are empty.
I used following css:
td.actor-custom-settings {
empty-cells: hide;
}
But it doesn't work becuase I have a header for this column.
<tr>
<th>Name</th>
<th class="actor-custom-settings"></th>
</tr>
Now I am using render-time algorithm to determine if there is no data in this column:
#if (Model.Config.Custom.Actors.All(x => x.CustomSettings.Count == 0))
{
<style>
.actor-custom-settings {
display: none
}
</style>
}
Entire generation code (for a reference, it's quite irrelevant for a question):
<table class="table">
<thead>
<tr>
<th>Name</th>
<th class="actor-custom-settings">Custom Settings</th>
<th></th>
</tr>
</thead>
<tbody class="table-body">
#foreach (var x in Model.Config.Default.Actors)
{
<tr>
<td><input type="text" class="form-control actor-name" value="#x.Name"></td>
<td class="actor-custom-settings">
#if (x.CustomSettings.Count > 0)
{
<table class="table table-bordered">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
#foreach (var pair in x.CustomSettings)
{
<tr>
<td class="actor-custom-key">#pair.Key</td>
<td class="actor-custom-value"><input type="text" class="form-control" value="#pair.Value"></td>
</tr>
}
</tbody>
</table>
}
</td>
<td>
<button class="btn btn-danger btn-xs table-button-change-state" onclick="deleteTableRow(event)">
<i class="fa fa-remove"></i>
</button>
</td>
</tr>
}
</tbody>
</table>
But I'm wondering if there is a pure CSS solution.
If I'm understading you correctly, then you simply need to edit your CSS rule to add a second selector to target the th elements with the .actor-custom-settings class and hide them if they're empty:
th.actor-custom-settings,td.actor-custom-settings{
empty-cells:hide;
}
Or you can simplify it to a single class selector:
.actor-custom-settings{
empty-cells:hide;
}