As a backend dev I didnt know how hard frontend was ;).
How can I put the "Create" button above the left side of the table:
Right now the button is in the middle of the table because the table is in a . This is the full code:
<div align="center">
<h1>All Tournaments </h1>
<p>Show: History or Unplayed</p>
Create
<table style="width:50%" id="tournament_table">
<tr id="table_head">
<th>Name</th>
<th>Players needed</th>
<th>Rounds</th>
<th>Host</th>
<th>Select robot</th>
<th>Played</th>
<th>Join tournament</th>
The button is the element. I want the page look like this:
Thanks
EDIT: The complete page looks like this.
The text above and the table beneath the Create button need to be centered. If I pull the button out of the align center div it appears completely to the left.
Wrap in a div and add class text-left on parent as follows:
<div align="center" style="width: 50%; margin: 0 auto">
<div class="text-left">
<h1>All Tournaments </h1>
<p>Show: History or Unplayed</p>
Create
</div>
<table id="tournament_table">
<tr id="table_head">
<th>Name</th>
<th>Players needed</th>
<th>Rounds</th>
<th>Host</th>
<th>Select robot</th>
<th>Join tournament</th>
<th>Played</th>
</tr>
</table>
</div>
Add a class .pull-left to the button
Create
<div class="clearfix"></div>
Related
On the left, I have buttons and the rest of the screen is a table, and I need a vertical line to act as a separator between the two but without any use of CSS/styles/classes.
Here is the base code:
<section align="left">
<div id="buttons">
<button type="button">Fire</button>
<br>
<button type="button">Water</button>
</div>
</section>
<!-- NEED A VERTICAL LINE HERE -->
<section align="center">
<table id="pokemons">
<tr>
<td>
<h5>Charizard</h5>
</td>
<td>
<h5>Blastoise</h5>
</td>
</tr>
<br>
<tr>
<td>
<h5>Pikachu</h5>
</td>
<td>
<h5>Squirttle</h5>
</td>
</tr>
</table>
</section>
I currently have this (for some reason in online editors the table isn't aligned to the middle, but on my local code it's fine):
I need this:
If you want to avoid using CSS, then your page will look atrocious.
There is not really a way to do that. I would make an <hr> tag and use transform: rotate(90); in your CSS.
I'm sorry but you will have to use CSS. No way around it, unless you use CSS or JavaScript.
I am trying to add an icon in front of the table.
<div class="row">
<div class="col-xs-offset-8 col-xs-4">
<span class="fa fa-pencil pull-left"></span>
<table class="table table-condensed table-bordered">
<thead>
<th class="text-center">Date</th>
</thead>
<tbody>
<tr>
<td class="text-center">01/01/2015</td>
</tr>
</tbody>
</table>
</div>
I need to an pencil on the left of the table on the same line as "Date"
Any help would be appreciated
One of the best tricks for positioning an element involves using the top and position properties.
To make room for the pencil, we are adding a left margin to the table. We're giving the pencil relative positioning and placing it 20 pixels from the top.
Now it appears outside and to the left of the table.
.fa-pencil {
top: 20px;
position: relative;
}
table {
margin-left: 20px;
}
http://jsfiddle.net/a00ykzy0/1/
I am using mpdf to convert my html to pdf. A fragment of the html code is like so:
<table>
<tbody>
<tr>
<td id = "company_address">
<div id="div1">
</div>
<br/>
<div id="div2" style="margin-left: 13.2mm; width: 100%;">
<address>
</address>
</div>
</td>
<td id="student_address">
</td>
</tr>
</tbody>
</table>
When I view the html on the browser, div2 is properly align i.e 13.2mm away from the left of the cell but once is converted using mpdf, the aligning does not take effect, i.e all text is just close to the cell border.
Doing something like #company_address { padding-left: 13.2mm } works, but I don't want to go that way because I want only div2 in the cell to be aligned. Appreciate any help
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}
I have this table, which is how it will look when a user posts. When a large amount of content is entered in the second td, the first td does what it should naturally do and center itself with the second one. Here is what it looks like:
http://puu.sh/YdaE
Is it possible to make it so the first td stays at the top and doesn't center itself with the second one? Because it looks kind of silly when it does...
Here is the basic jist the code:
<div id="feed">
<div class="post">
<table>
<tr>
<td><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Any help is appreciated, thanks.
Yes, with CSS.
vertical-align: top;
So you could just give a class to your first TD and apply the above-mentioned CSS.
I'm not sure I understood your question, but if you want to prevent the image on the first td to be vertically aligned just specify vertical alignment via HTML attribute as shown here:
<div id="feed">
<div class="post">
<table>
<tr>
<td valign="top"><img src="images/profile-pic.jpg"></td>
<td>
<div class="name">Kevin Jones</div>
<div class="message">Hanging out with my girlfriend, etc.</div>
</td>
</tr>
</table>
</div>
</div>
Add valign="top" attribute to the td tag