CODEWITHSUNDEEP
htmlcssalgorithmsyntax
Papageno
Papageno

Reputation: 149

How can I right align a div with a table?

I have a CSS problem that's really bugging me. I have a div container with a headline and a select. I also have a table, and I'd like to have my select right aligned with my table.

This is what I want:

enter image description here

I set my select to float right and it ends up at the right end of the screen as expected. The problem is that my table width isn't 100 % of the screen (and the width may actually vary).

This is what I get:

enter image description here

How can I make my div container with the select right align with my table?

This is what I've tried so far:

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
  float: right;
}
<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 2058

Answers (6)

Or Ben-Yossef
Or Ben-Yossef

Reputation: 419

Here is a possible solution -

<div class="container">
    <div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>
</div>

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.mysortdiv {
    margin-bottom: 10px;
    margin-left: 110px;
}

Here is the pen - https://codepen.io/orby32/pen/XWJOEJg

I removed all floats and instead wrapped the table and the select with container div, which have display: flex;. Using floats considered today as worst practice for align elements.

Upvotes: 2

bron
bron

Reputation: 1548

Best way to build up a table is to wrap it in a div. Using percentages on all elements will make it mobile friendly.

<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<div class="tbl">
  <table class="mytable">
    <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
    </tbody>
  </table>
</div>

with this css

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  white-space: normal;
}
.mysortdiv {
  width: 50%;
  margin-left: 50%;
}
.tbl {
  width: 100%;
}
.mysortdiv *,
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
.mysortdiv div,
.mysortdiv select {
  width: 100%;
  padding: 4px 6px;
  font-size: inherit;
}
.tbl table {
  border-top: 1px solid silver;
  border-left: 1px solid silver;
}
.tbl th,
.tbl td {
  width: 50%;
  padding: 4px 6px;
  border-right: 1px solid silver;
  border-bottom: 1px solid silver;
}

Upvotes: 1

Vikas Jadhav
Vikas Jadhav

Reputation: 4692

You can achieve this using flexbox no need to use float

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
margin-bottom:10px;
}

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<div class="parent">
  <div class="mysortdiv">
    <div>Sort</div>
    <select>
      <option value="1">First sort option</option>
      <option value="2">Second sort option</option>
    </select>
  </div>
  <table class="mytable">
    <thead>
      <tr>
        <th>My first column</th>
        <th>My second column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Something 1</td>
        <td>Other thing 1</td>
      </tr>
      <tr>
        <td>Something 2</td>
        <td>Other thing 2</td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

007
007

Reputation: 23

You could wrap it in a div? Then set each div to float right !

Upvotes: 2

Lokesh Suman
Lokesh Suman

Reputation: 503

Use CSS float:right; for your table

.mytable{float:right;}
<html>
<head>
    <style>
      table,th,td {border-collapse: collapse; border: 1px solid black;}
      .mytable {clear: both;}
      .mysortdiv {float:right;}
    </style>
</head>
<body>
    <div class="mysortdiv">
        <div>Sort</div>
        <select>
            <option value="1">First sort option</option>
            <option value="2">Second sort option</option>
        </select>
    </div><br><br><br>
    <table class="mytable">
        <thead>
            <tr>
                <th>My first column</th>
                <th>My second column</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Something 1</td>
                <td>Other thing 1</td>
            </tr>
            <tr>
                <td>Something 2</td>
                <td>Other thing 2</td>
            </tr>
        </tbody>
    </table>
</body>

Upvotes: 2

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

Add align="right" on table

<table class="mytable" align="right">


table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
  float: right;
}
<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable" align="right">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Related Questions