忽略内联样式HTML CSS

Question

我有个问题，这是我的错，但我正在努力解决。。。

我正在为电子商务建立一个网站，当你进入一个产品页面时，在底部，我有所有产品的描述/规格，而且都不一样(我有3000多个产品(，有些产品没有2栏，有些有。。。顺便说一句，跳到问题

• 我创建了一个表，但我犯了一个错误
• td样式="；宽度：50%">
• 我完成了电脑和平板电脑的版本，一切都很好。。。但对于移动设备，我使用显示块，因为我只想要1列。。。但我想要宽度：100%

---

• 我试过#vpc1 td{ width:100% !important; min-width:100% !important;}，也是代码#vpc td[style]...
• 我用边框和背景进行测试，效果很好，但宽度不会改变

<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

尝试将display: block设置为td并小心-id="tablevpc1"，但在CSS中是#vpc1 td。。。

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

Answer 2

当您正在构建时，请从一开始就做好。人们使用手机冲浪——目前的方法是手机优先，有时唯一关心的是如何填满巨大的屏幕；(
你不需要桌子，我会这样做：

<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%;}}

仅用于测试：

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

• 如果您想将<h1>放入<p>中，请记住该节内部至少需要一个标头
• 由于内容多种多样，一个好的解决方案是在部分中添加一个类，以便仅在需要时进行拆分

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

你肯定能够自己设计各个元素的样式，比如：字体、背景、边距、填充、边框、垂直和文本对齐。避免使用id必须是唯一的，而是使用class-一个小提示：

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