Skip to main content
C
carolynj52524498
Participating Frequently
August 16, 2020
Question

unable to post side by side tables

  • August 16, 2020
  • 2 replies
  • 290 views

I have been trying for hours to get 2 tables with 2 colums and 7 rows side by side in Boostrpa Dreamweaver and have not been able to get them to do that. I was able to do this on a diferent website, however for some reason I can't any longer.

Just so you know my computer had to be fixed about 2 weeks ago was it wasn't powering on. Since it came back I have been having some difficulties with Bootstrap.

I would appreciate any assistance. Thank you

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 16, 2020

    Tables are rarely used anymore.  I avoid using them if at all possible because they aren't responsive.

     

    When Dreamweaver acts up, it's often caused by coding mistakes.  The solution is to work with valid, error-free code.

    https://validator.w3.org/

    https://jigsaw.w3.org/css-validator/

     

    If that doesn't fix the problem, Restore Preferences.

    https://helpx.adobe.com/dreamweaver/kb/restore-preferences-dreamweaver.html

     

    Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    August 17, 2020

    'Tables are rarely used anymore. I avoid using them if at all possible because they aren't responsive'.

     

    A 2 column table will be responsive (its narrow) as long as the 2nd table is stacked beneath the 1st table for mobile devices. Tables with many columns cause issues and need more consideration and thought.

    O
    osgood_
    Legend
    August 16, 2020

     

    In Bootstrap create a two column layout and insert a table in each column:

     

    <div class="container-fluid">
<div class="row">
<div class="col-md-6">
<table class="table table-striped table-bordered w-100">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end col-md-6 -->

<div class="col-md-6">
<table class="table table-striped table-bordered w-100">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end col-md-6 -->
</div>
<!-- end row -->
</div>
<!-- end container-fluid -->

     

      O
      osgood_
      Legend
      August 16, 2020

      I guess you could also use flex to place the tables side-by-side (see code below):

       

      You will have to create your own table width though as Bootstrap seems to be a bit 'short' on w- helper classes... I'm sure a few more would have been helpful rather than just 25% - 50% - 75% - 100%.

       

      .w-40 {
      width: 40%;
      }
      @media (max-width: 768px) {
      .w-40 {
      width: 80%;
      }
      }

       

      <div class="container-fluid">
<div class="row flex-md-row flex-sm-column justify-content-md-center align-items-sm-center">
<table class="table table-striped table-bordered w-40 mx-md-3 mx-auto">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>



<table class="table table-striped table-bordered w-40 mx-md-3 mx-auto">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>

</div>
<!-- end row -->
</div>
<!-- end container-fluid -->

       

      O
      osgood_
      Legend
      August 16, 2020

      You could just as easily create this without all the Bootstrap inline css stuff. My preferred way of working as all the css is in one place and simply organised and less clutter in the actual html mark-up.

       

      <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>Tables Side-By-Side</title>
<style>
body {
font-family: helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.table-wrapper {
display: flex;
flex-wrap: wrap;
width: 80%;
margin: 0 auto;
}
.table {
width: 48%;
border-collapse: collapse;
border: 1px solid #ddd;
margin: 1%;
}
.table th {
text-align: left;
padding: 10px;
border: 1px solid #ddd;
}
.table td {
padding: 15px;
border: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
@media (max-width: 768px) {
.table {
width: 100%;
}
}

</style>
</head>
<body>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>



<table class="table">
<tr>
<th>Col 1 Header</th>
<th>Col 2 Header</th>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
<tr>
<td>Col 1</td>
<td>Col 2</td>
</tr>
</table>
</div>
<!-- end table-wrapper -->
</body>
</html>

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices