I'm active on a side called My Anime List. It's for tracking your Anime.
On this site you can upload a custom CSS Design für your List I already achieved the design I want, but I want to improve it little by little so my first problem occurred.
I want to to crop the Animes Names, to fit everything in one row.
How can I crop it? All I know its sth about the table layout, I already made it fixed, but now I don't know how to proceed.
.table {
table-layout: fixed;
width: 100%;
}
I tried to edit the td1, td2, but I think I need to change the inside the td to achive what I want, but all I tried did nothing.
My List, for examples see #51,#58 in Completed
Thanks for helping me, sorry for my bad english and if you need other informations I'll try to provide it to you.
solution (worked for me)
td.td2 span, td.td1 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.td1, .td2 {
background-color: #FFF;
border-color: #F2F2F2;
border-style: solid;
border-width: 0 0 1px !important;
max-width: 416px;
}
you may need text-overflow and turn span as a box :
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
table {
width:100%;
}
<table>
<tr>
<td class="td2" style="border-left-width: 1px;" align="center" width="30">28</td>
<td class="td2" style="border-left-width: 0">
<div style="float: right;">
<small>
Add -
More
</small>
</div>
<small style="float: right;margin:0.25em;">Airing</small>
<span>Tokyo Ghoul √A</span>
</td>
<td class="td2" align="center" width="45">5</td>
<td class="td2" align="center" width="50">TV</td>
<td class="td2" align="center" width="70">8/12</td>
<td class="td2" align="left" width="125"> <span id="tagLinks27899">Studio Pierrot</span>
<span id="tagRow27899" style="display: none;">Studio Pierrot</span>
</td>
<td class="td2" align="center" nowrap="" width="75"><span title=""> </span>
</td>
</tr>
</table>
Without seeing more of the code, I can only venture a guess as to what you want - you could try setting a height and max width for your <td> and using
overflow:hidden;
white-space: nowrap;
See Fiddle Here
EDIT:
GCyrillus added text-overflow:ellipsis; to the solution, and I hadn't even thought of it - it's a good way to make the text look neater. Updated Fiddle.
td.td2 span {
display:block;
white-space:nowrap;
overflow:hidden;
}
Related
I created a but it's not aligning my text to the . I've tried adding !important but the results are still not working. How can I fix this?
Here is my code below:
<div>
<table width="100%" cellspacing="0" cellpadding="0" role="presentation">
<!--Bullet 1 -->
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important;">1
</td>
</tr>
</table>
</div>
Please help?
The display: inline-block; renders the vertical-align ineffective.
Explanation: vertical-align is only valid for display: table-cell. So, if you change the display mode, the alignment becomes invalid.
Solution: Remove the display from the CSS style.
Add line-height:26px on td
<table>
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important; line-height: 26px;">1 </td>
</tr>
</table>
Delete the both of "display:inline-block" and "vertical-align:middle" then add "text-align: center".
How about adding span for the text?
<span style="display:flex; height:100%; align-items:center; justify-content:center;">1</span>
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
I have some HTML code. I have added two images: one alinged to the left and one to the right. Then it has two headings and an HTML table after that.
The problem is that I have use the following code to add the images to the document.
<img src="http://Path_To_Foler/Logo1.jpg" align="left" />
<img src="http://Path_To_Foler/Logo2.jpg" align="right" />
<p class="h1"><b>Private and Confidential</b> </p>
<p class="h1"><b>REPORT FOR Mr Person A BLA BLA</b> </p>
<table class="table" >
<tr>
<td class="CellHeader">Date </td>
<td class="CellHeader">Time</td>
</tr>
<tr>
<td class="cell"><AssessmentDateFrmMSPAPARR /></td>
<td class="cell"><CurrentRcFrmMSPAPARR /></td>
</tr>
</table>
CSS
<style>
.CellHeader{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
color:#FFFFFF;
background-color:#151515;
border:1px solid black;
border-collapse:collapse;
}
.cell{
width:50%;
text-align:left;
font-family: 'calibri';
font-size: 11pt;
border:1px solid black;
border-collapse:collapse;
}
.table{
width:100%;
border:1px solid black;
border-collapse:collapse;
}
.h1{
page-break-before: always;
text-align: center;
font-family: 'calibri';
font-size: 12pt;
}
<style>
Issue
Everything was working fine as expected. The problem started when I added the second image. Adding second image causes the table to be aligned right as well.
And when I take out the align:"right" atribute from the image element, the table is where it is supposed to be but the second image is pushed to the right which is kind of understandable.
How can I fix this?
Try replacing align="left" by style="float:left" and align="right" by style="float:right"
Then, add clear: both in .table{} in your CSS.
I am trying to make the button align up with the textbox, but I can not get it to work, if you need more code, I will be glad to post it :)
Here is my code: http://jsfiddle.net/Hunter4854/FFcAu/
<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td align="center" class="MainView" valign="middle">1</td>
<td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>
</tr>
<tr>
<td align="center" class="controls" valign="middle">
<textarea class="chatInput"></textarea>
<button type="submit">Send</button>
</td>
</tr>
</table>
Try to add vertical-align: middle to form elements themselves.
Entire contents (as a solid thing) of table cell are vertically aligned within the cell while mutual aligning of each inline element inside contents is specified via vertical-align of these inline elements, not table cell.
Add display: block and float: left to your .chatInput and button class:
.chatInput
{
display:block;
float:left;
width: 500px;
font-size: 12pt;
height: 75px;
box-sizing: border-box;
border: 1px solid #000;
padding-left: 5px;
padding-right: 5px;
outline: none;
resize:none;
}
button {
display:block;
float:left;
height:75px;
}
Fiddle: http://jsfiddle.net/kboucher/xH8sm/
How do I vertically center a div that is inside a table cell?
HTML:
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
CSS:
.rowClass {
vertical-align:middle !important;
height:90px;
}
.cellClass {
vertical-align:middle !important;
height:90px;
}
.divClass {
vertical-align:middle !important;
height:90px;
}
I know the class definitions are redundant, but I've been trying lots of different things. Why isn't the solution (whatever it is) intuitive. None of the "obvious" solutions that I tried would work.
There is no need to defineheight in .divClass . write like this:
.cellClass {
vertical-align:middle;
height:90px;
border:1px solid red;
}
Check this http://jsfiddle.net/ncrKH/
.divClass {
margin-top:auto;
}
HTML
<table border=1>
<tr class="rowClass">
<td class="cellClass">
<div class="divClass">Stuff</div>
</td>
</tr>
</table>
CSS
.rowClass {
vertical-align:middle !important;
height:90px;
}
.cellClass {
vertical-align:middle !important;
height:90px;
}
.divClass {
margin-top:auto;
}
Live Example
With out any css itself you can do this with valign="middle" try this code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<th height="550" align="center" valign="middle" scope="col">
<div>Hello</div>
</th>
</tr>
</table>