I need some help in a sizing question. If you view the following code in desktop browsers, everything is sized as it should be. If you try to open it on a mobile phone (I have tested it with several iPhones), the td (white with grey border) is not resized properly. The td element is resized correct, if there is a span element that's causing the overflow.
div.highlighter-rouge {
overflow-x: scroll;
}
div.highlight {
width: 100%;
}
.highlight {
display: inline-block;
}
.highlight {
background-color: #eeeeee;
}
pre.highlight {
margin-top: 0;
margin-bottom: 0;
}
pre code {
white-space: pre;
}
table {
margin: 15px 0;
padding: 0;
}
table {
word-wrap: anywhere;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
td.rouge-code>pre>span {
display: inline-block;
}
.highlight .nt {
color: #000080;
}
.highlight .s1 {
color: #d01040;
}
html {
-webkit-text-size-adjust: 100%;
}
<div class="language-bash highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
</td>
<td class="rouge-code">
<pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
</td>
</tr>
</tbody>
</table</code>
</pre>
</div>
</div>
I've tried many things now, but my level of knowledge about this, just leads to trial and error. If you don't really like the solution with tables, I can also create a version with the exact same behaviour without them.
https://codepen.io/ribbonCaptain/pen/GRrqgpE
.rouge-table td {
vertical-align: top;
}
.rouge-table td pre {
white-space: pre-wrap;
}
...will do it. See it here.
There's not much to explain.
Related
I'm building a website in wordpress, using the 'Rookie' theme, and have installed the sportpress plugin, as well as an accordion plugin.
I'd like to display a table in accordions, but also make it display properly when on a mobile device. This is the webpage > http://wnu.054.myftpupload.com/fixtures-and-results/
I've sorted this for the majority of tables (fixtures for the month) using the following CSS:
.table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#media only screen and (max-width: 40em) {
thead th {
display: none;
}
td, th {
display: block;
}
td[data-th]:before {
content: attr(data-th);
}
}
table {
border-spacing: 0;
}
td,
th {
padding: 0.5em;
}
th {
font-weight: bold;
text-align: left;
}
thead th {
background-color: #999;
color: white;
}
td > div {
float: right;
}
#media screen and (max-width: 500px) {
thead th {
display: none;
}
thead th:first-child:after {
content: "'s";
}
td, th {
display: block;
width: 100% !important;
}
td[data-th]:before {
content: attr(data-th);
border-radius: 10px 0px 0px 10px;
font-weight: bold;
min-width: 10rem;
display: inline-block;
}
The problem I've got is that I don't have access to edit the tables in Sportspress so I can't edit the table data on the Player stats table so that it includes the 'data-th="heading"' - meaning the headers don't display.
Without the CSS above, the sportspress table displays OK (not perfect, but not bad either), I was wondering if I can set it so that the sportspress table ignores the CSS I've set up (on the responsive view) or if there is a better way to do this? If possible, the sportpress table would display the headers, but I think I'd have to upgrade from the free version?
I have text and image in the td tag. The text is stay still but trying to text-align: right; an image. So I used span class on the image. But image doesn't listen to command still next to the text, not going right corner.
<td>マンションを購入しようとした時に何から始めたら良いでしょうか
<span class="open-button-big">
<img src="img/open-button-big.png" class="open-button-big-class">
</span>
</td>
it's looking like :
and this is the CSS
table {
margin-top: 20px;
display: none;
}
table {
border-top: solid 1px blue;
}
tr {
border-top: solid 1px blue;
}
th {
text-align: center;
padding: 10px 10px 10px 10px;
}
td {
font-size: 14px;
}
.Question {
width: 40px;
}
span {
text-align: right !important;
}
.open-button-big-class {
width: 70px;
height: auto;
}
Since span is an inline elements and it wraps the image you should set it's display to block or use a div instead. To align the whole span to the right, use float: right
table {
margin-top: 20px;
width: 100%;
}
table {
border-top: solid 1px blue;
}
tr {
border-top: solid 1px blue;
}
td {
font-size: 14px;
}
span {
float: right !important;
display: block;
}
.open-button-big-class {
width: 70px;
height: auto;
}
<table>
<tr>
<td>マンションを購入しようとした時に何から始めたら良いでしょうか
<span class="open-button-big">
<img src="https://www.reduceimages.com/img/share-icon.png" class="open-button-big-class">
</span>
</td>
</tr>
</table>
You can use this:
span {
float: right !important;
}
But I strongly recommand using this kind of css selector:
table td span {
float: right !important;
}
Because if you select just span, all of spans will get this style, using specific selection in better for controlling over other spans
https://jsfiddle.net/tbnzaga9/
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
position: absolute;
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
width: 30%;
left: 1%;
}
.right {
position: absolute;
right: 60%;
}
#smenu table tr td p {
display: inline-block;
float: left;
}
<div id='smenu'>
<table>
<tr>
<th> Title</th>
<th class='right'> Date</th>
</tr>
<tr>
<td class='button'>test</td>
<td class='right'>
<p>4/27</p>
</td>
</tr>
</table>
</div>
I was making a list of separate websites and the dates they were made, but I can't get them to line up! I tried float:left and display: inline-block, but it's just not lining up. Any suggestions?
Also - is there a better way than using a table?
try these change in CSS.
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
}
td {
text-align: center;
width: 200px;
height:25px;
}
#smenu table tr td p {
//display: inline-block;
//float: left;
}
Try to replace <p></p> by <div></div> or use a css reset sheet to clear the paragraph doing a line break. Also, I think tables are ok to do things like this, but limit you more. If you really wanted to you could mimic a table with some divs where you have your rows and in each one have your columns you could have differents classes by rows and by column in different rows.
I would remove all "position:absolute".
Given that you have tabular data, it makes sense to just use a regular table tag.
I've also added the following styles:
.right {
padding-right: 60%;
}
#smenu table {
width:100%;
}
.right p {
margin:0px;
}
th {
text-align: left;
}
You can see the changes here:
https://jsfiddle.net/tbnzaga9/2/
I have the following DOM structure:
JSFiddle demo
<table class="tbl">
<tr>
<th>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
<td>
<div>
<span>
A lot of text in hereeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
</span>
</div>
</td>
</th>
</tr>
</table>
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
This table is located on the right hand side of my page, but if there is a large amount of text in one or both of the span tags, the table extends extends off my page.
I have to keep the table at width: 100% as it needs to fill all available space on the right hand side of my page.
Can I add a CSS ellipsis to the span tag but keep the overall width of the table at width: 100%?
It doesn't seem to be working for me at the moment, any suggestions or advice would be greatly appreciated.
you can try his one:
table.tbl{
background-color: #FFF;
border: 1px solid #000;
border-collapse: separate;
border-radius: 5px;
float: left;
margin: 10px 0;
width: 100%;
table-layout: fixed;
}
table.tbl tr {
font-weight: 400;
text-align: left;
}
table.tbl th {
color: #FFF;
font-weight: 400;
padding: 6px;
text-align: left;
}
table.tbl td {
padding: 10px 8px;
}
table.tbl div {
max-width: 100%;
display: inline-flex;
}
table.tbl span {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
DEMO HERE
code pen
css
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
width: 14.285714286%;
box-sizing: border-box;
}
th {
vertical-align: middle;
}
td {
height: 100px;
vertical-align: top;
padding: 4px;
}
.event-list {
list-style: none;
margin: 0;
padding: 0;
}
.event-list li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span.day {
float: right;
font-weight: bold;
}
.other-month .day {
color: #888;
}
td.other-month {
background-color: #eee;
}
body {
font-family: sans-serif;
font-size: 10pt;
}
html
<td class="day-cell current-month"><span class="day">2</span><ul class="event-list"><li>1-4 FM - Fishing</li></ul></td>
I've set the width of each of the table cells to 14.28% but the <li>s push the table cells out even though I have overflow:hidden on them. I don't want the list-items to stretch the cells; I want them to show an ellipsis if the line is to long. Is that possible?
Simply add table-layout: fixed; to table
Demo: http://jsfiddle.net/Y8Zx5/
Explanation: This will force the table cells to have the specified width of 14.285714286%; forcefully, hence preventing the table cells to grow in width with the content, and resulting in the ellipsis to occur in your desired width.
Did you try adding text-overflow: ellipsis;?
I have this working with bootstrap at THIS DEMO LINK
It uses the following CSS
.setWidth {
max-width: 80px;
}
.concat>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
}
For this HTML
<td class="setWidth concat"><div>Some text for table cell here</div></td>