I'm trying to create a table where in every cell, there is a small coloured square next to a text.
However, I want the square and the text to be on the same line, and I cannot do it.
Sadly I'm not a css or html master, I've tried many alignment options I found on this and other sites, but none of them worked.
You can look at a minimal example below to understand what I'm talking about.
Is there any way to do it in css? Thank you
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Instead of nesting a <div> for the badge, you could create a ::before pseudo element for each <td> and make it inline-block so the pseudo element stays inline with the text content. This way you can ensure each table data element will have the small colored square before the cells text content.
.badge::before {
content: "";
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
display: inline-block;
vertical-align: middle;
}
/* Optionally, give the cells different colors */
.badge.two::before {
background-color: #ae7;
}
.badge.three::before {
background-color: #f06;
}
<html>
<body>
<table border="1">
<tr>
<td class="badge one">
some text in cell 1
</td>
<td class="badge two">
some text in cell 2
</td>
<td class="badge three">
some text in cell 3
</td>
</tr>
</table>
</body>
</html>
If you instead want to keep the same HTML structure, you could make the <td> a flexbox with display: flex to ensure the content is aligned in a row format (side-by-side). Using align-items will define how items are aligned along the cross axis.
.badge{
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div> not horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Use flexbox:
.badge {
background-color: #000000;
width: 1em;
height: 1em;
border-radius: 25%;
margin-right: 1em;
}
td {
display: flex;
align-items: center;
}
<html>
<body>
<table border="1">
<tr>
<td>
<div class="badge"></div>horizontally aligned text
</td>
</tr>
</table>
</body>
</html>
Related
I am learning HTML and I am trying to align different icons in a line but in a different positions. The first element should be aligned to the left and the others aligned to the right.
E1| |E2|E3|E4
I am not sure how to implement that. Should I use a table? Or a div with <li> elements?
I tried to use a table with a blank column but it's not working
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td width="60%"> test </td>
<td> blank </td>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</table>
You mean this?
Flex ratio
.box {
display: flex;
}
.box div {
background-color: yellow;
border: 1px solid black;
}
.e1{
flex: .1 0 0;
}
<div class="box">
<div class="e1">E1</div>
<div>E2</div>
<div>E3</div>
<div>E4</div>
</div>
or using table
td {
background-color: yellow;
border: 1px solid black;
}
<table>
<tr>
<td>E1</td>
<td width="60%"> </td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
</table>
A common method for this is to use display: flex for the container and apply margin-left: auto to the first of the child elements that should be moved to the right. That way that left margin will grow as wide as possible within the given container and with the given settings:
.container {
width: 100%;
display: flex;
background: #ccc;
}
.container>div {
padding: 5px 10px;
}
.container>div:nth-child(2) {
margin-left: auto;
}
<div class="container">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
</div>
I have a table whose cells contain div elements with different content, so they have different heights. Take this fiddle as an example:
https://jsfiddle.net/6btarubL/2/
As you can see, the code is really simple:
HTML
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
CSS
tr {
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 100%;
}
td div {
height: 100%;
}
I'd like that the divs inside the cells took all the space, so they looked the same. Firefox does this, so its rendering is:
Chrome, on the other side, doesn't obbey the height : 100% df the divs, so the rendering is:
Then fun fact is that, if I remember correctly, Chrome was rendering it the same as Firefox until I updated to version 63 (I think I had version 59 before).
Any suggestions? Thanks!
Please Change your this Css Code and Check again. Chrome
td {
vertical-align: top;
min-width: 150px;
height:1;
}
HTML Change like below
<table>
<tr>
<td>
<div style="background-color: orange">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: aqua">
Line 1<br>
Line 2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #fac">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color: #8f5">
DIV
<br>
<br>
<br>
</div>
</td>
<td>
<div style="background-color: #cb1">
Line 2.1<br>
Line 2.2<br>
<br>
</div>
</td>
<td>
<div style="background-color: #eda">
10<br>
20<br>
30<br>
</div>
</td>
</tr>
</table>
The solution whas this CSS:
<!-- THIS CODE DOESN'T WORK -->
tr {
display : flex;
height: 100%;
}
td {
vertical-align: top;
min-width: 150px;
height: 1;
}
td div {
height: 100%;
}
I'm right where I began. As #3rdthemagical pointed, the display : flex on <tr> breaks the layout and the columns aren't aligned. So, I did another test and these are the results:
WORKING CSS IN CHROME:
tr {
height: 100%;
}
td {
height: 1px;
}
div {
height: 100%;
background-color: aqua;
}
Sample output:
The above code looks like this in Firefox:
WORKING CSS IN FIREFOX:
tr {
height: 100%;
}
td {
height: 100%; /* <---------------- */
}
div {
height: 100%;
background-color: aqua;
}
But, in Chrome I have the problem for which I started this question, so it looks like this:
Who's right? Chrome or Firefox? Isn't there a cross-browser solution for this?
I'll keep on investigating...
You can use display flex
jsfiddle
CSS
tr {
height: 100%;
display: flex;
}
td {
vertical-align: top;
min-width: 150px;
}
td div {
height: 100%;
}
With flex, you can center elements, align vertically, reorder, you can do a lot of stuff.
I have already tested in mozilla, you can use prefixes to have more compatibility:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
Finally, the solution that worked for me was to use CSS conditionals and load different styles depending on the browser. I've explained it in this question:
Load different CSS rule depending on the browser in an Angular 4 component
Cheers,
I can't figure out why this text won't align with the bottom of the image:
Here is the example snippet:
img {
height: 80px;
width: auto
}
.spacer {
width: 30px;
}
h1 {
vertical-align: bottom;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" /></td>
<td class="spacer"></td>
<td>
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
h1 has margins by default. You can remove these in your CSS.
table h1 {
margin: 0;
}
<table>
<tr>
<td><img src="https://unsplash.it/80" style="height:80px; width:auto" /></td>
<td style="width:30px"></td>
<td style="vertical-align:bottom">
<h1><b>KCFishFans.com</b></h1>
</td>
</tr>
</table>
Here is my alternative solution for the layout and the space between the elements:
I would solve it with flexbox and a wrapper. For the space between the img and h1 I would use padding-left in case of an empty td with a width. The advantage of this solution is, it is 100% aligned to the bottom of the img. With tables it isn't aligned 100% with the bottom of the image (I think because of the default line-height for the h1).
Here you have a complete guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope this helps.
.wrapper {
display: flex;
align-items: baseline;
}
.wrapper__image {
height: 80px;
width: auto
}
.wrapper__title {
padding-left: 30px;
}
<div class="wrapper">
<img class="wrapper__image" src="https://unsplash.it/80">
<h1 class="wrapper__title">KCFishFans.com</h1>
</div>
I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->
Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE
I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}
<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.
Here is the html code that makes the table:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="profile">
<img src="http://www.teleread.com/wpcontent/uploads/2009/05/image18.png" />
</div>
</td>
<td>Hello</td>
</tr>
</table>
Here is the css:
.profile img {
width: 120px;
height: 125px;
float: left;
margin-right: 4px;
margin-top: 4px;
margin-bottom: 4px;
border: 1px #cc1212 solid;
clear: both;
}
Here is the code in action on jsfiddle:
http://jsfiddle.net/Yeqnn/
THE ISSUE: The word "Hello" is vertically centered in the right column
How do I fix this? BTW, the image has to be in the table and floated left to work with my current theme... any ideas, if so drop an answer plz.
Simply put vertical-align: top; on your <td> elements.
Demo