I have a definition list split in multiple columns:
dl { -webkit-column-count: 2; }
Unfortunately, I sometimes have a case where a DT occurs at the very bottom of one column and its following DD at the top of the next, which looks really ugly. Since I can't wrap the elements I want to keep together in a container, my only option appears to be something like:
dt { -webkit-column-break-after: avoid; }
but that doesn't seem to work. Any ideas?
Here's a fiddle that demonstrates the problem.
Related
I am looking to present a set of properties. key: val type-of-thing. Not knowing any better, I am laying it out in a table.
The following css:
table.properties td:first-child {
text-align: right;
}
table.properties td:first-child::after {
content: ":";
}
aligns the text in the 1st column (the keys) to the right, then appends a semicolon.
Is there a way to express that in a more concise way? Like in a single rule? Or maybe such presentation is better done in another manner altogether?
Appreciate a tip!
I have a problem with table th, I can not set display none to the last th.
Here is my code:
#content-area-job-details #site-content-job-details .entry-content table.job-table tr th:last-of-type{
display:none;
}
when I use this code it set display to none for all th. I want only last th display none.
You can see my problem at:
http://westecmedia.com/?page_id=974
Help me please
This doesn’t work that way. :last-child or :last-of-type are always relative to the parent container. So in case of a table, that’s the tr element. If you match all tr elements in the table, and then get the last th for each, then you are matching every last th in each of those rows. So in your case, essentially all ths.
You would need to have a way to select that one tr which you are interested in, but other than maybe :nth-last-child(2), there is not really a good way to get that one. You should add an actual class to it.
Note that just hiding the th will not give you the desired result though. Table cells are always table cells, and unless you make them take more than a single cell, they will only ever occupy a single cell. So in your case, if you hide or remove that one th, the following td will not fill the whole row. It will only fit that very small cell where the th was previously located. You would have to add colspan="2" to the td in the markup to fix that.
You should use javascript to do what you need...
(function(window) {
'use strict';
function hideLastTh() {
var lastElement;
try {
lastElement = window
.document
.querySelector('.job_info')
.parentElement
.parentElement
.querySelector('th[scope="row"]')
;
lastElement
.classList
.add('hidden')
;
} catch(e) {
console.error('hideLastTh:ERROR', e);
}
}
return window.document.addEventListener('DOMContentLoaded', hideLastTh);
})(window);
I can see that your site uses jQuery. If you can add jQuery code, just add these two lines:
$("th:last").hide();
$("th:last").siblings("td").attr("colspan","2");
I have a very simple webgrid with 3 columns:
View
columns: grid.Columns(
grid.Column("Applicant Name",
format: (item) => #Html.ActionLink((string)item.Name, "EditApplicant", "Applicant", new { id = item.ApplicantId },
null), style: "AppName")
, grid.Column("Role", "Role", style: "Role")
, grid.Column("ApplicantSkills", "Skills", style: "AppSkills")
I want to set my columns to a fixed width. I have tried using percentage widths here and exact widths like 500px, 100px etc, and they all work initially, but are lost after postback.
css:
.AppSkills {
width: 70%;
}
.AppName {
width: 20%;
}
.Role {
width: 10%;
}
My grid is a results grid, which is populated from a number of filters, so every time the user selects different filters and clicks search the results are changed and the grid re-populated. What im finding is the grid column width style is being lost. Here is what my screen looks like. Initially it looks fine, but after selecting different filters and hitting search, the grid column widths are lost.
I have tried posting my form as a GET and a POST to see if it was the Get that was losing the formatting. But both yield the same results.
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
Is there anything obvious I'm doing wrong here? Or is there any way I can ensure a fixed width on my grid columns so they don't move about?
You're missing spaces after the commas, so it's probably treating one of the entries as a big unbreakable word. If you can't change the underlying data, assuming it isn't the code doing the concatenation, you might be able to use the css word-break property to sort it.
Make sure that after postback that the grids still have the classes applied to them.
Also, please post the HTML for us to view so we can diagnose the problem since we are not to sure if they are styled divs or a table.
If it is a table, try running the following CSS. Basically, it will target the columns individually without class names, just in case the classes are lost during postback.
td:nth-child(3) {
width: 70%; /* targeting the skills column */
}
td:nth-child(1) {
width: 20%; /* targeting the name column */
}
td:nth-child(2) {
width: 10%; /* targeting the role column */
}
I need to make every two rows of my table grey and I would prefer to use nth-child if possible.
I've messed around with Chris Coyier's nth-child tester but still can't get it.
I need the following formula:
1,2 - grey
3,4 - white
5,6 - grey
7,8 - white
9,10 - grey
and so on. I'd prefer not to put a class in the html as I'm sure that's going to be a suggestion from some. If there is a way to pull this off with nth-child, that's what I'm looking for.
Realize that you are doing groups of 4, then you can see that you can have every 4th element and every 4th element minus one being white, then every 4th element minus two, or every 4th element minus 3 being grey.
So, you'd use 4n and 4n-1, then 4n-2 and 4n-3:
div:nth-child(4n), div:nth-child(4n-1) {
background: red;
}
div:nth-child(4n-2), div:nth-child(4n-3) {
background: blue;
}
That code isn't precise to your case, I wrote it for a jsFiddle proof-of-concept.
NB disclaimer: Keep in mind that nth-child does not work in IE8. Typical issue, of course.
Here's what I'm using to right-align the first column of each table.
table td:nth-child(2n-1) {
align: right;
text-align: right;
}
#Eric's answer is exactly right - but if you want to easily extend this to groups of 3, 4, 5, etc, and you're using Sass, here's the code (if you want more groups, just increase $largestGroupSize):
.table-with-grouped-rows {
// generate styles for .groups-of-2, .groups-of-3, etc.
$largestGroupSize: 6;
#for $groupNumPerColor from 2 through $largestGroupSize{
$totalGroupNum: $groupNumPerColor * 2;
&.groups-of-#{$groupNumPerColor} {
$start: $totalGroupNum - 1;
$end: $groupNumPerColor;
#for $primaryBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$primaryBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $white;
}
}
$start: $groupNumPerColor - 1;
$end: 0;
#for $alternateBgIndex from $start through $end {
$nthString: #{$totalGroupNum}n - #{$alternateBgIndex};
> tbody > tr:nth-of-type(#{$nthString}) > td {
background-color: $light-gray;
}
}
}
}
}
And then in your markup, on the <table> element, you'd simply add the classes table-with-grouped-rows and groups-of-{n}. For example, if you want a table with groups of 3, you'd write:
<table class="table-with-grouped-rows groups-of-3">
Boom.
I have a relatively long table. Each record has six rows. So an item with an identifier of 16 has <tr-16-1><tr-16-2>.....<tr-16-6>, identifier 25 would be <tr-25-1><tr-25-2>.....<tr-25-6>, etc.
I would like the page breaks to not split any grouping of the six rows. So if <tr-25-6> would continue on a new page, I would like all <tr-25's> to break with it.
I can easily attach a class to all six rows if that would help. Can anyone please point me in the right direction on how to do this? Thanks so much for your help.
A possibility is grouping all the rows that are referring to the same record inside a single tbody, so you have more tbody each one containing 6 rows (it's perfectly fine and seems to be logical as an atomic group),
then add this rule for media print
#media print {
tbody {
page-break-inside: avoid;
}
}
In this way a page break inside a tbody will be avoided.
Unfortunately page-break-inside is supported on every modern browser except Firefox (Bug #132035)
I would give this a shot:
#media print {
tr, td, th { page-break-inside:avoid }
}
If you don't want to use the #media tag, this is another way:
Add class=print-entire to your table, and add this style:
table.print-entire tr td, table.print-entire tr th {
page-break-inside: avoid;
}