You are viewing our Forum Archives. To view or take place in current topics click here.
Simple HTML/CSS issue
Posted:

Simple HTML/CSS issuePosted:

Sweenie
  • Junior Member
Status: Offline
Joined: Jul 27, 201311Year Member
Posts: 82
Reputation Power: 4
Status: Offline
Joined: Jul 27, 201311Year Member
Posts: 82
Reputation Power: 4
Hi guys, im trying to make a table that allows me to edit rows and delete them. I have an edit and delete button at the end of each record but they wont be nice and go next to eachother, instead they sit like this:

[ Register or Signin to view external links. ]

Help would be appreciated, thanks
#2. Posted:
-Deano
  • Rated Awesome
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Either they are set as block-level elements (Set to display: inline;) or you need to increase the fixed width of the table.
#3. Posted:
var
  • TTG Senior
Status: Offline
Joined: Dec 24, 201212Year Member
Posts: 1,498
Reputation Power: 79
Status: Offline
Joined: Dec 24, 201212Year Member
Posts: 1,498
Reputation Power: 79
You could try using flex-box, and setting their flex-direction property to row. It would be a bit easier to help if you included code.
#4. Posted:
CriticaI
  • Summer 2018
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
Status: Offline
Joined: Nov 05, 201311Year Member
Posts: 2,753
Reputation Power: 452
Can you post some of your code?
This could be caused by several things.
#5. Posted:
Soph
  • Summer 2019
Status: Offline
Joined: Apr 14, 201410Year Member
Posts: 426
Reputation Power: 34
Status: Offline
Joined: Apr 14, 201410Year Member
Posts: 426
Reputation Power: 34
For each 'button' code recommend you to use this within your table element:

<div class="row">
<div class=".col-xs-6 .col-md-4">
<!-- Button 1-->
</div>
<div class=".col-xs-6 .col-md-4">
<!-- Button 2-->
</div>
</div>


Should fix the issue as well, could be the width on the table column, you can add this more quickly directly to the columns head,
style="width:auto;"


Hopefully helps!
#6. Posted:
Cyimking
  • TTG Senior
Status: Offline
Joined: May 02, 201212Year Member
Posts: 1,129
Reputation Power: 34
Status: Offline
Joined: May 02, 201212Year Member
Posts: 1,129
Reputation Power: 34
Option 1: Use flex (flexbox), set the column to row, then align the items to center.

Option 2: (from stackoverflow)

With html 5

<table border="1">
    <tr>
        <td align="center" valign="middle">Text</td>
        <td align="center" valign="middle">Text</td>
    </tr>
</table>


without html 5

// html
<table border="1" id="cssTable">
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

// css
td
{
    height: 50px;
    width:50px;
}

#cssTable td
{
    text-align:center;
    vertical-align:middle;
}



Option 3: Use position absolute on the column (I assume last column).
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.