How to use CSS to override table styles in HTML files created by Word

Question

I am learning HTML, JavaScript, and CSS to work on a project for modifying HTML documents that were created from the Word "Save As" function. I want to be able to use Word to save a document as a "Web Page, Filtered". The ultimate goal that I am working towards is to be able to use CSS to standardize HTML documents that were originally created in Microsoft Word.

Future notes: eventually, I would like to be able to use JavaScript (seems like the best option for now) to be able to apply different formats based the number of columns in the table. I will also be affecting the indent of the tables (I am thinking that this might be able to be done through margin on the table. I would also like to be able to add some tags around the beginning of the body to insert standardized formatting for stuff like menus, a stationary header, and probably some over features.

I got a long way to go but taking baby steps towards the final results.

Below is the HTML code that was created by Word for the tables only. I made slight modifications to it because I plan on using an external CSS file and I work on a process to remove the header styles.

Below is the CSS code that I have tried. Below is the most recent version, but I saw in other posts that the !important should let me override the inline styles. In this example, I have both width and style modifications because the HTML from Word has both, but I have tried just one and the other.

body {
    font-family: "Arial";
}

table {
    width=100% !important;
}
td[style]:nth-child(1) {
    width=5% !important;
    style='width:5%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(2) {
    width=10% !important;
    style='width:10%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(3) {
    width=10% !important;
    style='width:10%;border:solid windowtext 1.0pt; border- 
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}
td[style]:nth-child(4) {
    width=75% !important;
    style='width:79%;border:solid windowtext 1.0pt; border-            
               top:none;padding:0in 5.4pt 0in 5.4pt' !important>
}

I am expecting the output of the page to have the tables all be a certain percentage of the web page and also define the percentages of the columns. For example, the table will be 100%, column 1 will be 5%, column 1 will be 10%, column 1 will be 10%, and column 4 will be 75%,

ksav · Accepted Answer

The CSS you posted is invalid. Fix it up and it should behave as expected.

body {
  font-family: "Arial";
}

table {
  width: 100% !important;
}

td:nth-child(1) {
  width: 5% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(2) {
  width: 10% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(3) {
  width: 10% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

td:nth-child(4) {
  width: 75% !important;
  border: solid windowtext 1pt;
  border-top: none;
  padding: 0in 5.4pt 0in 5.4pt !important;
}

How to use CSS to override table styles in HTML files created by Word

Answers (1)

Related Questions