Ways to create a separator or divider between rows in a table

I'm currently working on creating a table layout and I want to include dividers similar to those seen on this website. Specifically, I am looking to have thin grey dividers between rows. I've attempted the following code, but it doesn't seem to be achieving the desired effect:

<table rules="rows">
    <tbody>
        <?php
            foreach ($records as $record) {
                if (isset($record['translate'])) 
                {
                    echo '<tr>';
                    echo "<td width='500'>" . strip_tags($record['language_value']) . "</td>";
                    echo "<td width='200'>" . strip_tags($record['translate']) . "</td>";
                    echo '</tr>';
                }
            }
        ?>
    </tbody>
</table>

Answer №1

Here is the solution you've been searching for:

<table>
    <tr style="border-bottom: 2px dashed gray;">
        <td style="width:400px">hello</td>
        <td style="width:150px">world</td>
    </tr>
    <tr style="border-bottom: 2px dashed gray;">
        <td style="width:400px">hello</td>
        <td style="width:150px">world</td>
    </tr>
    <tr style="border-bottom: 2px dashed gray;">
        <td style="width:400px">hello</td>
        <td style="width:150px">world</td>
    </tr>
</table>

This code includes inline CSS. Please inform me if you want a CSS classes alternative.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

How can input be fixed in place within a list inside an Ionic framework popover?

I have the following code in a popover template: <ion-popover-view class="customPopup"> <ion-header-bar class="bar bar-header barHeaderCustom"> <h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1> </io ...

Toggle Visibility of Div Based on Matching Class Name When Clicked

Just delving into the world of jQuery and could use some guidance. Is there a way to show a div with a matching class when a specific button is clicked? For example, clicking on a button with the class '.project1' should display the corresponding ...

Utilizing JavaScript to create multiple HTML tables from JSON data

Is it necessary to create separate tables in HTML for each set of JSON data when all tables have the same number of columns (2 columns)? I am looking to minimize the JavaScript function that displays the table with the current JSON data. Can I use one tabl ...

Can you help me understand how to ensure the CSS translate feature lands in a specific div, no matter its initial position?

I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon cl ...

Show the first letter of the first name using HTML

Is there a way to display the first letter of the first name followed by a period, a space, and then show the last name in asp/html/vb? ...

Updating SVG colors using VueJS

I'm struggling to change the color of an existing static SVG image. Here's the code I have: <img class="icon-shop" src="@/assets/icon-shop.svg"/> <style> .icon-shop { width: 32px; fill: orange; stroke: oran ...

What are the top techniques for designing with Angular 2 Material Design?

As a newcomer to angular 2 material design, I have noticed the primary, accent, and warn classes that apply specific colors to elements. Are these the only styling options available in Angular Material 2? Are there other classes that can be utilized for cu ...

Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

When using Bootstrap 3.2 and applying navbar-right to two different dropdown menus, they tend to overlap slightly. The code snippet below is taken directly from the Dropdown examples on the official Bootstrap website, but with the modification of having tw ...

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

Tips for fixing the position without affecting the width

I'm trying to figure out how to keep my #header fixed in position without it expanding in width. Despite checking my code multiple times, I can't seem to identify the factor causing my header to become wider and shift downwards unexpectedly. I in ...

Can the tab button be used to move to the next field?

Is it possible to navigate to the next field by pressing the tab button? If so, how can we achieve this? Currently, I am utilizing Bootstrap classes col-md-6. Thank you! <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4. ...

"Trouble with Material-UI DataGrid: Column headers are being cut off

I am facing an issue where my column names are getting cut off even though they should fit in the available space. https://i.sstatic.net/kmKFi.png ...

What is the best way to extract the content within a nested <p> element from an external HTML document using the HTML Agility Pack?

I'm currently working on retrieving text from an external website that is nested within a paragraph tag. The enclosing div element has been assigned a class value. Take a look at the HTML snippet: <div class="discription"><p>this is the ...

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

What could be the reason for the presence of three pixels of white space below this particular table

My table is supposed to have a fixed height of 146px, but there seems to be an extra row of three pixels at the bottom. I've tried various methods to remove any unwanted spacing or padding, but nothing has worked so far. The only solution I found was ...

Changing class from 'current-menu-item' to 'active' for filtering

I'm currently developing a unique theme inspired by the Roots Theme, which now incorporates Twitter Bootstrap as its framework. One challenge I encountered is that it utilizes a custom 'walker' for navigation, making it difficult to simply ...

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties... I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div ...

The AppBar is consuming space and obstructing other elements on the

As I dive into React/Material-UI and learn the ropes of CSS, I've come across a challenge with my simple page layout featuring an AppBar. Unfortunately, this AppBar is overlapping the elements that should be positioned below it. In my quest for a sol ...

Retrieving data from an external PHP script

I'm facing an issue with retrieving results from a PHP file after submitting a form: index.php (located at ) <form id='loginForm' action='http://domain1.com/mail.php' method='POST'> <input id=&apo ...