Ignore inline styles HTML CSS

Question

I have a problem, it's my fault, but I'm trying to solve this...

I'm building a web site for e-commerce, when you enter a product page, in the bottom, I have description / specification for all products, and its all different (I have more then 3000 products), some products don't have 2 columns, others have... btw skip to the question

• I create a table, but i make the mistake to put
• td style="width:50%">
• I finish the PC and Tablet version, all fine... but to mobile, I use display block, because i just want 1 column... but i want width:100%...

---

• I have tried #vpc1 td{ width:100%;important: min-width;100% !important;} , also the code #vpc td[style]...
• I test with borders and backgrounds and work fine, but the width doesn't change...

 <table id="tablevpc1"> <tbody> <tr> <td style="width: 50%;"> <ul id="ulvpc"> <li><strong style="font-size: 20px;">Inovadores Sensores VPC Ativos DataCAN</strong></li> <li>VPC TM comunica&ccedil;&atilde;o pelos cabos de tens&atilde;o do ve&iacute;culo, tecnologicamente revolucionarios, eliminando a necessidade de passar cabos at&eacute; &agrave; unidade de controle do sistema. Utiliza os cabos existentes no ve&iacute;culo, para enviar sinais digitais dos novos sensores digitais activos atrav&eacute;s da patenteada tecnologia DataCAN TM ao mostrador de LED no interior do habit&aacute;culo. Esta versatilidade oferece a melhor e &uacute;nica solu&ccedil;&atilde;o para aplica&ccedil;&atilde;o em ve&iacute;culos de passageiros, cami&otilde;es com e sem atrelado, autocarros, camionetas, autocaravanas, ve&iacute;culos com rulote, equipamentos agr&iacute;colas.</li> </ul> </td> <td style="width: 50%;"> <ul id="ulvpc2"> <li><strong>3E-VPC3048DL</strong> Kit dianteiro 4 sensores VPC em forma de L com mostrador</li> <li><strong>3E-VPC3048BL</strong> Kit dianteiro 4 sensores VPC em forma de L com buzzer</li> <li><strong>3E-VPC3047BS</strong> Kit traseiro 4 sensores VPC direitos com bessouro</li> <li><strong>3E-VPC3047BL</strong> Kit traseiro 4 sensores VPC em L com bessouro</li> <li><strong>3E-VPC3047DS</strong> Kit traseiro 4 sensores VPC direitos com mostrador</li> <li><strong>3E-VPC3047DL</strong> Kit traseiro 4 sensores VPC em L com mostrador</li> <li><strong>3E-VPC304P2L</strong> Kit traseiro 4 sensores VPC em L aplicado como segundo<br /> sistema num ve&iacute;culo como a vref. VPC3047 ex. uso na rulote</li> </ul> </td> </tr> </tbody> </table> <:-- **THE STYLE I'M TRYING TO USE:** --> @media (max-width: 768px) { #tablevpc1 { border; 0: min-width;99%:important;: } #tablevpc1 tr { margin-bottom; 10px: min-width;99%:important;: display; block: } #tablevpc1 td{ min-width;99%:important;: display; block: text-align; left: font-size; 13px:} #tablevpc2 { border; 0: min-width;99%:important;: } #tablevpc2 tr{ min-width;99%:important;: margin-bottom; 10px; display: block; } #tablevpc2 td{ min-width:99% !important!; display: block; text-align: left; font-size: 13px;} }

Answer 1

Try to set display: block to td and be careful - id="tablevpc1" , but in your CSS is #vpc1 td ...

#tablevpc1 td {width: 100% !important; display: block;}

Answer 2

As you are building, please do it good at start. People use mobiles to surf - current approach is mobile-first, sometimes the only concern is how to fill the huge screen;)
You don't need table, I would do it like this:

<section><h1>Inovadores Sensores VPC Ativos DataCAN</h1>
<p>VPC TM comunicação pelos cabos de tensão do veículo, tecnologicamente revolucionarios, eliminando a necessidade de passar cabos até à unidade de controle do sistema. Utiliza os cabos existentes no veículo, para enviar sinais digitais dos novos sensores digitais activos através da patenteada tecnologia DataCAN TM ao mostrador de LED no interior do habitáculo. Esta versatilidade oferece a melhor e única solução para aplicação em veículos de passageiros, camiões com e sem atrelado, autocarros, camionetas, autocaravanas, veículos com rulote, equipamentos agrícolas.
</p><ul>
<li>3E-VPC3048DL Kit dianteiro 4 sensores VPC em forma de L com mostrador</li>
<li>3E-VPC3048BL Kit dianteiro 4 sensores VPC em forma de L com buzzer</li>
<li>3E-VPC3047BS Kit traseiro 4 sensores VPC direitos com bessouro</li>
<li>3E-VPC3047BL Kit traseiro 4 sensores VPC em L com bessouro</li>
<li>3E-VPC3047DS Kit traseiro 4 sensores VPC direitos com mostrador</li>
<li>3E-VPC3047DL Kit traseiro 4 sensores VPC em L com mostrador</li>
<li>3E-VPC304P2L Kit traseiro 4 sensores VPC em L aplicado como segundo sistema num veículo como a vref. VPC3047 ex. uso na rulote</li>
</ul></section>

*{ box-sizing: border-box}
section{ display: block; margin: 50px auto; text-align: center}
p, ul { display: inline-block; width: 100%; margin: 0 auto; text-align: left; vertical-align: middle}
@media screen and (min-width: 1000px){ ul, p{ width: 49%;}}

for tests only:

section{ border: 1px solid red}
p{ border: 1px solid blue}
ul{  border: 1px solid green}

• If you like to put <h1> into <p> do it remembering that section needs at least one header inside,
• due to the varied content - a good solution would be to add a class to the section - to split only when needed

@media screen and (min-width: 1000px){ .two ul, .two p{ width: 49%;}}

You will definitely be able to style individual elements yourself - properties like: font, background, margin, padding, border, vertical- and text- align. Avoid of using the id must be unique, use class instead - a little hint:

<section class="two"><h1>I'm red</h1> ... </section>
.two h1{ color: red}