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.
See the Pen Blogger Responsive Table Code by ywyang236 (@ywyang236) on CodePen.
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.
