How to implement something like a table (without columns) in css, html?

JohnSmith
January 10, 2024
123 views
0 votes
2 Answers

I need to implement something like a table (no columns, only rows). I drew a layout of how it should look. As I understand it, you need 3 divs – a common one, then for the top table (which needs to be divided in half – each with its own set of rows), and for the bottom. Rows can dynamically increase in height if there is not enough space for them. How can I do that?
layout.

<div class="dx-scroll-view.css-accident-info">
  <div class="div">
    <div class="wrapper">
      <div class="row" style="border-right: 5px solid black">
        <div class="css-field">
          <span class="css-label">Initicator:</span>
          <span class="css-value">{{accident.initiator}}</span>
        </div>
      </div>
      <div class="row" style="border-right: 5px solid black">
        <div class="css-field">
          <span class="css-label">Initicator:</span>
          <span class="css-value">{{accident.initiator}}</span>
        </div>
      </div>
    </div>
  </div>
</div>

style

.wrapper {
    display: flex;
    flex-direction: column;
  }

  .row {
    width: 50%;
    height: 40px;
    border: 1px solid #000;
  }

I tried to implement it like this, but it didn’t work

Tags: css html

Answers

I’m not sure I understand where you ran into an issue but the following basic HTML creates the structure you posted in your image link. I left off the styling because it’s unclear to me what is not working in your implementation.

<html>

<head>
    <style>
        div {
            border: 1px solid purple;
        }
        #top-container {
            overflow: hidden
        }
        .top-big-divs{
            float: left;
        }
    </style>
</head>
<body>
    <div id="top-container">
        <div id="top-left-big-div" class="top-big-divs">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div id="top-right-big-div" class="top-big-divs">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
    <div id="bottom-big-div">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

</body>

Hi have a look at using CSS GRID although it can just be done with traditional styling:

https://gridbyexample.com/examples/

https://css-tricks.com/snippets/css/complete-guide-grid/

Just tweak the below to your liking

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns, each taking up half the available space */
  grid-template-rows: auto auto; /* Two rows, height set automatically based on content */
  gap: 10px; /* Adjust the gap between cells as needed */
  border: 1px solid black; /* Border around the grid container */
}

.top-left,
.top-right {
  border: 1px solid black; /* Border for the individual cells */
}

.top-right {
  border-left: 5px solid black; /* Thicker left border for the top-right cell */
}

.bottom {
  grid-column: 1 / span 2; /* The bottom cell spans across both columns */
  border: 1px solid black; /* Border for the bottom cell */
}

/* Optional: If you want the top cells to have a fixed height, you can set it here. */
.top-left,
.top-right {
  min-height: 150px; /* Replace with the desired height */
}

<div class="grid-container">
  <div class="top-left">
    <!-- Content for the top-left cell -->
  </div>
  <div class="top-right">
    <!-- Content for the top-right cell -->
  </div>
  <div class="bottom">
    <!-- Content for the bottom cell -->
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.