Is it possible to generate a table without any grid lines present?

Question

Is it possible to generate a table without any grid lines present?

Currently, I am in the process of designing a table that will function as a popup when a link is clicked within my imported SQL table. An example of this table is included with this message for reference.

After conducting thorough research, I attempted to construct a table similar to the one featured in the attached image.

This is an outline of my approach:

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>


<table style="width:30%">
  <tr>
    <th>PT</th>
    <th>OT</th>
    <th>SLP</th>
    <th>NSG</th>
    <th>NTA</th>
  </tr>
  <tr>
    <td>15</td>
    <td>15</td>
    <td>2</td>
    <td>11</td>
    `<td>9</td>`
  </tr>

</table>

</body>
</html> </pre>

I anticipate the final output to mirror the image shared in the post

The design I aim to emulate can be viewed here

html css bootstrap-4 bootstrap-modal

Answer 1

Answer №1

By default, tables do not display grid lines. Below is the code snippet that creates table grid lines:

<style>
    table, th, td {
    border: 1px solid black; /*  <<===== this one  */
    border-collapse: collapse;
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

You can modify it to:

<style>
    table, th, td {
    border-collapse: collapse; /*  You can keep this line or not, optional */
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

Update:

To address the comment question, my suggestion would be to use two tables with a surrounding DIV element where you add the border. To create a rounded corner border effect, utilize the position:absolute property in CSS and set the parent DIV's position to relative.

Here's an example implementing the above concept:

table{border-collapse: collapse;}
#tblDiv{position:relative;width:25vw;border:1px solid #aaa;border-radius:10px;}
th, td {
  width: 6vw;
  padding: .5vw;
  text-align: center;
}

#rbrdDiv{position:absolute;top:0;right:0;width:3vw;height:100%;border-radius: 0 10px 10px 0;background:blueviolet;}

<div id="tblDiv">
  <div id="rbrdDiv"></div>
  <table>
    <tr>
      <th>PT</th>
      <th>OT</th>
      <th>SLP</th>
    </tr>
    <tr>
      <td>15</td>
      <td>15</td>
      <td>2</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>NSG</th>
      <th>NTA</th>
    </tr>
    <tr>
      <td>11</td>
      <td>9</td>
    </tr>
  </table>
</div>

To create additional visual effects like arrows using pseudo-elements, refer to the following resources for guidance:

https://css-tricks.com/pseudo-element-roundup/

https://css-tricks.com/the-shapes-of-css/

References:

https://css-tricks.com/almanac/properties/b/border-radius/

Answer 2

By default, tables do not display grid lines. Below is the code snippet that creates table grid lines:

<style>
    table, th, td {
    border: 1px solid black; /*  <<===== this one  */
    border-collapse: collapse;
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

You can modify it to:

<style>
    table, th, td {
    border-collapse: collapse; /*  You can keep this line or not, optional */
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

Update:

To address the comment question, my suggestion would be to use two tables with a surrounding DIV element where you add the border. To create a rounded corner border effect, utilize the position:absolute property in CSS and set the parent DIV's position to relative.

Here's an example implementing the above concept:

table{border-collapse: collapse;}
#tblDiv{position:relative;width:25vw;border:1px solid #aaa;border-radius:10px;}
th, td {
  width: 6vw;
  padding: .5vw;
  text-align: center;
}

#rbrdDiv{position:absolute;top:0;right:0;width:3vw;height:100%;border-radius: 0 10px 10px 0;background:blueviolet;}

<div id="tblDiv">
  <div id="rbrdDiv"></div>
  <table>
    <tr>
      <th>PT</th>
      <th>OT</th>
      <th>SLP</th>
    </tr>
    <tr>
      <td>15</td>
      <td>15</td>
      <td>2</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>NSG</th>
      <th>NTA</th>
    </tr>
    <tr>
      <td>11</td>
      <td>9</td>
    </tr>
  </table>
</div>

To create additional visual effects like arrows using pseudo-elements, refer to the following resources for guidance:

https://css-tricks.com/pseudo-element-roundup/

https://css-tricks.com/the-shapes-of-css/

References:

https://css-tricks.com/almanac/properties/b/border-radius/

Answer 3

Answer №2

There seems to be some CSS code styling the border in place. To remove it, simply delete the property 'border: 1px solid black;'. I hope this solves your issue!

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;

} th, td { padding: 5px; text-align: left; }

Answer 4

There seems to be some CSS code styling the border in place. To remove it, simply delete the property 'border: 1px solid black;'. I hope this solves your issue!

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;

} th, td { padding: 5px; text-align: left; }

Is it possible to generate a table without any grid lines present?

Answer №1

Update:

Answer №2

Similar questions

Can columns in Bootstrap be used within a row without a container?

How can I create a single-page application that adjusts to different screen sizes effortlessly?

Ion-List seamlessly integrates with both ion-tabs and ion-nav components, creating a cohesive and dynamic user interface

Tips for altering the icon fill color in toastr notifications

Error: The database connection is currently down

Insert metadata tag into the head element of the parent iframe

Image loading in NextJS is limited to only Firefox browsers

Creating an HTML Canvas effect where images are placed onto another image

Executing a custom function when clicking within a Bootstrap 4 modal in an Angular 7 application

Creating a Runescape Tracker: What essentials should I include?

Obtain consistent outcomes by entering identical data in both Ajax and PHP

Combining hover and mousedown event listeners in jQuery: Tips and tricks

Enhance form validation by utilizing jquery.validate to display appropriate icons indicating correct and incorrect input, with the option to

How can I obtain the current state of HTML checkboxes from a local JSON file?

Creating dynamic image carousels using the latest versions of Bootstrap and AngularJS

Is it possible to customize the appearance of individual sections in an HTML5 range slider by changing their

Challenges with conflicting CSS styling issues

Secure User Authentication using HTML and JavaScript Box

What are the steps for integrating a CMS with my unique website design?

Dynamic HTML and CSS Table Alignment Techniques