Custom CSS – Improve bw_plug table formatting

Custom CSS improve table formatting with more vertical padding in each row
Custom CSS improve table formatting with more vertical padding in each row. Optical illusion.
Generated by Adobe Firefly
2048 x 2048

I used my AI tool to generate some custom CSS to improve the formatting of a table with a class attribute of bw_plug.

Write some custom CSS to style a table with more vertical padding in each row.
The table has a class of bw_plug

It nearly got the answer right. Each CSS selector was prefixed with .table rather than table. I removed the unwanted dots and pasted the custom CSS into my CSS block.

table.bw_plug {
    border-collapse: collapse;  /* Collapse borders */
    width: 100%; /* Full width */
 }
/* Add more vertical padding in table rows */
table.bw_plug tr {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: left;
}
/* Add border and background color to table header */
table.bw_plug th {
    background-color: #eee;
    border: 1px solid #ddd;
    padding: 10px;
}
/* Add border to table data */
table.bw_plug td {
    border: 1px solid #ddd;
    padding: 10px;
}

This will style your .bw_plug table with more vertical padding in each row. It will also give your table a full width and ensure that the borders between your cells collapse into a single border. The th cells have a grey background with padding of 10px, and a border. The td cells also have a border with the same padding.

I also changed the background colour for the table heading so that you could see the border.

Plugin name and description Plugin links Version, total downloads, last update, tested
Yoast SEO
Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using the Yoast SEO plugin.
22.1
645,249,245
February 20, 2024
6.4.3
Jetpack – WP Security, Backup, Speed, & Growth
Improve your WP security with powerful one-click tools like backup, WAF, and malware scan. Includes free tools like stats, CDN and social sharing.
13.1.3
386,126,141
February 21, 2024
6.4.3

Trying again

I asked ChatGPT 3.5 exactly the same. It replied with the correct CSS selectors.

I then re-ran my original query. It gave a much shorter reply.

.bw_plug { width: 100%; } .bw_plug th, .bw_plug td { padding: 20px 0; text-align: left; }

Excerpt

Improved bw_plug table formatting with custom CSS, adding vertical padding, full width, and collapsing cell borders. Changed background and padding for th cells. Corrected selectors by removing unwanted dots. Chat 3.5 provided correct selectors for the same query.

38 words

SEO info