CODEWITHSUNDEEP
htmlcssbootstrap-4
codetime
codetime

Reputation: 209

How to make a two row table that select the whole line with bootstrap or plain HTML

I am trying to explore how to do this,

i want a two column display ( a column for type and one for date) and when a line is selected it selects the whole line. I don't have too much experience in HTML and i am unsure how i can do this. The goal is to display an image based on which row is selected. Ideally there wouldn't be any separating line between both column.

This is the a prototype of how it looks like:

enter image description here

My current idea was to use bootstrap, but i am not too sure if i am going in the right direction:

<div class="panel panel-default">
  <div class="panel-heading">Panel Heading</div>
  <div class = "panel-body">
  <div class="col-lg-4 col-md-6 mb-4">

  <div class="card">
  <div class="list-group row">
    
    <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
    <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
    <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>

    
</div>
  </div>

</div>

</div>
</div>

If anyone could give me an idea on how to do this, would be greatly appreciated. Thanks a lot.

EDIT

Based on recommendation i made an HTML table and implemented to hovering, now my problem is that i want to display an image on the right side of this table and display in the space the image associated with the table row. Will a bootstrap card be ideal for that ?

Here's my table code with a bootstrap card under but the card doesn't want to go to the right haha

html:

<div class ="table">
  <tr>
    <th>Date</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>Dem partage imputation PES</td>

  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>Dem exp méd au prof expert</td>
  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>avis désistement IVAC</td>
  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>Curriculum vitae</td>
  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>dem inscription dépôt direct</td>
  </tr>
  <tr>
    <td>2020-11-17</td>
    <td>impôt</td>
  </tr>
    <tr>
    <td>2020-11-17</td>
    <td>Changement adresse en ligne</td>
  </tr>
    <tr>
    <td>2020-11-17</td>
    <td>Refus CES 180 jours Réclamation</td>
  </tr>
</table>
<div class="card" style="display: inline-block;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
</div>

css:

.table {
    display:table;
    width:50%;
    height:50%;
}
tr:hover { background-color :#888888; }

Upvotes: 0

Views: 196

Answers (2)

A Haworth
A Haworth

Reputation: 36574

Given the data in an HTML table a way of associating an image with each row is to get that row to set a CSS variable with the url needed for the img to become a background. For example:

<tr style="--img: url(https://picsum.photos/id/1015/200/300);">

Then in the CSS an after pseudo element has --img as background-image and on hover of the tr it scales up (from 0 to 1), positioned absolutely to the right of the table.

If it is decided to go for a whole card on click then all the cards could be stored in the HTML, as in the code given in the question, and revealed just when their related tr is clicked. This would probably be best done with JS acting on the click event and setting a 'show' class on the relevant card. A start has been made on this by putting the table in a container, inline-block, and the cards would also be in this container.

* {
  margin: 0;
  padding: 0;
}
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.table {
  display: inline-block;
}
tr::after {
  position: absolute;
  top: 0;
  right: 0; 
  transition: all 1s linear;
  content: '';
  opacity: 0;
  width: 50vw;
  height: 50vh;
  float: right;
  transform: scale(0);
  background-image: var(--img);
  background-size: contain;
  background-repeat: no-repeat;
}
tr:hover::after {
  opacity: 1;
  transform: scale(1);
}
<div class="container">
<table class="table"><!-- incorrectly div not table incorrect space after class -->
  <thead>
  <tr>
    <th>Date</th>
    <th>Type</th>
  </tr>
  </thead>
  <tbody>
  <tr style="--img: url(https://picsum.photos/id/1015/200/300);">
    <td>2020-11-17</td>
    <td>Dem partage imputation PES</td>
  </tr>
  <tr style="--img: url(https://picsum.photos/id/1016/200/300);">
    <td>2020-11-17</td>
    <td>Dem exp méd au prof expert</td>
  </tr>
  <tr style="--img: url(https://picsum.photos/id/1018/300/300);">
    <td>2020-11-17</td>
    <td>avis désistement IVAC</td>
  </tr>
  <tr style="--img: url(https://picsum.photos/id/1019/1024/768);">
    <td>2020-11-17</td>
    <td>Curriculum vitae</td>
  </tr>
  <tr style="--img: url(https://picsum.photos/id/102/200/300);">
    <td>2020-11-17</td>
    <td>dem inscription dépôt direct</td>
  </tr>
  <tr style="--img: url(https://picsum.photos/id/1022/200/200);">
    <td>2020-11-17</td>
    <td>impôt</td>
  </tr>
    <tr style="--img: url(https://picsum.photos/id/1021/768/1024);">
    <td>2020-11-17</td>
    <td>Changement adresse en ligne</td>
  </tr>
    <tr style="--img: url(https://picsum.photos/id/1023/200/300);">
    <td>2020-11-17</td>
    <td>Refus CES 180 jours Réclamation</td>
  </tr>
  </tbody>
</table>
</div>

Upvotes: 0

Shashank Gb
Shashank Gb

Reputation: 1012

Here it is, As far as I know, It can't be done by pure CSS. So A little bit of JavaScript is added.

Brief Explanation

First 3 lines get the DOM Elements.
Since getElementsByTagName returns array of elements var rows becomes array.
In the for loop, onmouseover is implemented for each <tr> and <tr> contains data-img attribute.
At last we are adding the value of respective <tr>'s data-img value to <img src> using img.src.

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
var img = document.getElementById('tr-img');

for(var i = 0; i < rows.length; i++){
    table.rows[i].onmouseover = function(){
        var imageLink = this.getAttribute('data-img');
        img.src = imageLink;
        
    };
}
.table {
    display:table;
    width:50%;
    height:50%;
}
tr:hover { background-color :#888888; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="table">
    <table id='tableId'>
        <tr >
            <th>Date</th>
            <th>Type</th>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190715/gallery/preview/03_r_car.jpg'>
            <td>2020-11-17</td>
            <td>Dem partage imputation PES</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190720/gallery/preview/02_o_car.jpg'>
            <td>2020-11-17</td>
            <td>Dem exp méd au prof expert</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190714/gallery/preview/04_g_car.jpg'>
            <td>2020-11-17</td>
            <td>avis désistement IVAC</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190715/gallery/preview/03_r_car.jpg'>
            <td>2020-11-17</td>
            <td>Curriculum vitae</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190720/gallery/preview/02_o_car.jpg'>
            <td>2020-11-17</td>
            <td>dem inscription dépôt direct</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190720/gallery/preview/02_o_car.jpg'>
            <td>2020-11-17</td>
            <td>impôt</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190715/gallery/preview/03_r_car.jpg'>
            <td>2020-11-17</td>
            <td>Changement adresse en ligne</td>
        </tr>
        <tr data-img='https://res.cloudinary.com/dxfq3iotg/image/upload/v1565190720/gallery/preview/02_o_car.jpg'>
            <td>2020-11-17</td>
            <td>Refus CES 180 jours Réclamation</td>
        </tr>
    </table>
    <div class="card" style="display: inline-block;">
        <img src="" id='tr-img' class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>
</div>

Since you said then go on to JS, I tried to briefly explain. If any doubts Mention in the comment.
I am used similar image links multiple times so don't confuse. Image will repeat

Upvotes: 1

Related Questions