Responsive Table Html Code Request

Discussion in 'HTML & Website Design' started by MarkStrobel3367, Apr 19, 2018.

0
  1. #1
    I am looking for a responsive table html code where I can adjust the column widths and cell colors. Basically, I would like the table to consist of 4 columns and 7 rows with the left side column wider than the rest. Is anyone aware of how I can accomplish this? Thanks.
     
    MarkStrobel3367, Apr 19, 2018 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Tables are inherently responsive to the limit of their matrix integrity. Here is an abbreviated example.
    
<!DOCTYPE HTML>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta content=
  "width=device-width, height=device-height, initial-scale=1"
  name="viewport">
  <title>
  Test document
  </title>
  <style media="screen">
  /*<![CDATA[*/

  body, html {
   font: 100%/1.5 sans-serif;
   margin:0
   padding: 0;
  }

  p {
   font-size: 1em;
  }

  h1, h2, h3 {
   font-family: serif;
  }

  h1 {
   text-align: center;
  }

  table {
   border-collapse: collapse;
   text-align: left;
   width: 100%;
  }

  thead th {
   border-bottom: 1px solid gray;
  }

  td, th {
   background-color: #fee;
   width: 23%;
  }

  td:first-child,
  th:first-child {
   background-color: #ddd;
   width: 31%;
  }

  td:hover {
   background-color: white;
  }

  td:last-child {
   text-align: right;
   }

  /*]]>*/
  </style>
  </head>
  <body>
  <h1>Responsive Tables</h1>

  <table>
  <caption>
   Test table
  </caption>

  <thead>
   <tr>
    <th scope="col">
    Item name
    </th>

    <th scope="col">
    Size
    </th>

    <th scope="col">
    Color
    </th>

    <th scope="col">
    Price/doz
    </th>
   </tr>
  </thead>

  <tbody>
   <tr>
    <th scope="row">
    Widget
    </th>

    <td>
    small
    </td>

    <td>
    red
    </td>

    <td>
    $47.50
    </td>
   </tr>

   <tr>
    <th scope="row">
    Widget
    </th>

    <td>
    large
    </td>

    <td>
    blue
    </td>

    <td>
    $107.99
    </td>
   </tr>
  </tbody>
  </table>
  </body>
</html>
    Code (markup):
    gary
     
    Last edited: Apr 19, 2018
    kk5st, Apr 19, 2018 IP
    deathshadow likes this.
  3. MarkStrobel3367

    MarkStrobel3367 Well-Known Member

    Messages:
    116
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Thanks, Gary. This should work!
     
    MarkStrobel3367, Apr 19, 2018 IP
  4. dam pointing

    dam pointing Greenhorn

    Messages:
    63
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #4
    Did you also check out the bootstrap table coding?
     
    dam pointing, Apr 20, 2018 IP
  5. MarkStrobel3367

    MarkStrobel3367 Well-Known Member

    Messages:
    116
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    No.
     
    MarkStrobel3367, Apr 20, 2018 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Why would anyone add a layer of abstraction on top of very simple structural and presentation declarative languages? It is simple ignorance to do so.

    gary
     
    kk5st, Apr 20, 2018 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Because most of the mouth-breathing halfwits out there's answer to EVERY question is "Rawz muh hurr durz the bootcraps!" slopping it into every situation no matter how mind-numbingly DUMBASS and outright IGNORANT that steaming pile of SHIT might be?

    Same as how a decade ago someone would ask how to colour a link when the cursor was over it, and some know-nothing turd that knew Jack about Shit would chime in with "use jQuery".

    Bootcrap, huffing hell... the only thing you can learn from it is how NOT to code a website!

    In case you couldn't guess, I'm no longer playing nice on the topic.
     
    deathshadow, Apr 21, 2018 IP
  8. MarkStrobel3367

    MarkStrobel3367 Well-Known Member

    Messages:
    116
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #8
    Thank you so much for your responses. I am now using a different table that better meets my needs.
     
    MarkStrobel3367, Apr 23, 2018 IP