Using Responsive Tables in Blogger

Effects of Using Responsive Tables

If you copy and paste tables from other places directly into the article editor, the tables after publishing will likely exceed the default borders or display in an unexpected way. If you don't want the tables to break, you can only use the "HTML View" mode to edit the code and insert tables, which will automatically adjust based on the page width (effect shown in the image below).

Template tables and the table code settings for this blog will interfere with each other and cannot be displayed simultaneously, so images are used here to show the effects.

Simple Version: Article Editor Modification Method

This method is suitable for people who don't know how to modify layout code in the backend. You only need to paste the code into the article when using tables.

Simple version modification steps:

1. Go to this location to download the txt file

2. Copy all the code

3. Open a Blogger article

4. Switch to "HTML View" mode

5. Paste the code

Advanced Version: Backend CSS Modification Method

This method requires going to the blog backend's "Theme" section, finding the specified location, and modifying the CSS part in the HTML. You only need to modify it once, and when you need to use tables in the future, you just need to paste part of the code, which looks less messy.

Advanced version modification steps:

1. Click the CSS button above and copy all the code

2. Open the blog backend and click: Theme ➜ Edit HTML (please backup before modifying)

3. After <style>, paste the CSS code

4. Confirm the code is pasted between <style> and </style>, then click save

5. Click the HTML button above and copy all the code

6. Open a Blogger article, switch to "HTML View" mode, and paste the HTML code

Common Code for Layout Adjustments

Below are the commonly modified parts and their corresponding code. You can keep what you need and delete entire lines if you don't need them.

(1) Adjust Grid Line Position and Color

1.table-container table th {
2    border-right: 1px solid #000;
3    /* The line above indicates the table has a right border */
4    border-bottom: 1px solid #000;
5    /* The line above indicates the table has a bottom border */
6    }

(2) Adjust Table Shadow

1.table-container table { 
2    box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4);
3    }

(3) Adjust First Row (Header) Background and Text Color

1.table-container table thead tr {
2    background: #000;
3    color: #fff;
4    }

(4) Adjust Table Background Color

1.table-container table {
2    background: #fff;
3    }

(5) Odd/Even Rows Display Different Colors

If you need alternating colors, add these three lines of code at the bottom of the CSS. Enter 'even' in the parentheses to display colors for even rows, enter 'odd' for odd rows.

1table tr:nth-child(even){
2    background: #E1E1E1;
3    }

Adjust the value after line-height to change the row height.

1.table-container table {
2    line-height:16px;
3    }

(6) Adjust Table Row Height

HTML Editing Tools

Table content cannot be modified directly in "Compose mode". You need to use "HTML View" mode and modify the code, otherwise the table may not display properly.

If you want to avoid modification errors, you can consider going to the Blogger Responsive Table Code page to modify. I've already set up the table code, so you can modify it directly on the webpage and see the results immediately. Even if you mess up, just refresh the page to start over.

Using Full-Width Spaces to Change Column Width Proportions

Under this template, column widths will be divided equally. By adding "full-width spaces" to the left and right of header text, you can make certain parts of the table wider.