忽略内联样式 HTML CSS

Question

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

我正在建立一个电子商务网站，当你进入一个产品页面时，在底部，我有所有产品的描述/规格，而且都是不同的（我有超过 3000 种产品），有些产品没有 2 列，有些有...顺便跳到问题

我创建了一个table，但是我错误地把
td 样式="宽度:50%">
我完成了 PC 和平板电脑版本，都很好...但是对于移动设备，我使用显示块，因为我只想要 1 列...但我想要 width: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

在构建过程中，请一开始就做好。人们使用手机上网 - 目前的做法是 mobile-first，有时唯一关心的是如何填满大屏幕 ;)
你不需要table，我会这样做：

<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> 中，请记住该部分至少需要一个 header，
由于内容不同 - 一个好的解决方案是在该部分添加 class - 仅在需要时拆分

@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}

忽略内联样式 HTML CSS

Ignore inline styles HTML CSS

html

css

html-table

width

inline-styles