What's the best way to make sure all the data fits neatly within the confines of the table?

Question

What's the best way to make sure all the data fits neatly within the confines of the table?

Is there a way to ensure that all the information remains within the table without using the

style="overflow:scroll"

property?

Here is an image of the table overflowing to the right in the middle of the LATEST DATE CHECKED column.

Here is the code snippet:

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 0 solid rgba(0, 0, 0, 0.125);
  border-radius: 4px;
}

table {
  display: table;
  border-collapse: separate;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: grey;
}

<div class="nk-block">
  <div class="card card-bordered">
    <table class="table table-voucher">
      <thead class="tb-voucher-head">
        <tr class="tb-voucher-title">
          <th class="tb-voucher-date tb-col-md">
            <span>DATE</span>
          </th>
          <th class="tb-voucher-seen tb-col-md">
            <span>LATEST DATE CHECKED</span>
          </th>
          <th class="tb-voucher-status tb-col-md ">
            <span>STATUS</span>
          </th>
        </tr>
      </thead>
      <tbody class="tb-voucher-body" id="voucher_content"></tbody>
    </table>
  </div>
</div>

css

Answer 1

Answer №1

After some experimentation, I have updated the code to achieve this new look:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
<style type="text/css">
thead {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
}

table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
    }
    
 th {
    padding: 13px;
 }
 
</style>
</head>
<body>
    <div class="nk-block">
            <div class="card card-bordered">
                <table border="1">
                    <thead class="tb-voucher-head">
                        <tr>
                            <th>DATE</th>
                            <th>LATEST DATE</th>
                            <th>CHECKED</th>
                            <th>STATUS</th>                        
                    </thead>
                </table>
            </div>
        </div>

</body>
</html>

Answer 2

After some experimentation, I have updated the code to achieve this new look:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
<style type="text/css">
thead {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0, 0, 0, 0.125);
    border-radius: 4px;
}

table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
    }
    
 th {
    padding: 13px;
 }
 
</style>
</head>
<body>
    <div class="nk-block">
            <div class="card card-bordered">
                <table border="1">
                    <thead class="tb-voucher-head">
                        <tr>
                            <th>DATE</th>
                            <th>LATEST DATE</th>
                            <th>CHECKED</th>
                            <th>STATUS</th>                        
                    </thead>
                </table>
            </div>
        </div>

</body>
</html>

What's the best way to make sure all the data fits neatly within the confines of the table?

Answer №1

Similar questions

The striped color override feature in Bootstrap appears to be malfunctioning in Internet Explorer 8

launch active link in pop-up dialog

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

What is the best way to update a CSS href using window.open with JavaScript?

Rails assets folder is not directed to the specified directory in the layout file

Require presenting only four lists - slideDown in jQuery

Using CSS3 animation when adding a class, rather than on page load

I am interested in creating a design where two DIVs are layered on top of each other with one having transparency, allowing visibility through to the background DIV. This can be achieved using a combination of

Angular: Design dependent on attributes

To ensure proper display, the canvas should be set to display block when its width is 100vw and height is 100vh

Align Bootstrap 4 dropdowns with their parent element

Can you explain the purpose of :not(style) ~ :not(style) in CSS?

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

Get the ability to overlay text onto an image by using jQuery for downloading

How can I show two unique chart modals simultaneously?

The depth order of overlapping elements and the rotation effect achieved through

Steps for resetting the HTML5 meter element

The background image in the hovering textbox shifts and changes size

Utilize the ::before selector to insert white spaces

Is there a way to confirm if all div elements have a designated background color?