Zatrzymaj CSS przesłonięcie atrybutu szerokości HTML

Question

Mam starą zawartość zawierającą tabele o szerokości określonej za pomocą atrybutu szerokości HTML, tak jak: <table width="250">. Ten atrybut jest nadpisywany przez regułę dla selektora CSS table. Czy mogę przestać to przesłonić, aby tabele miały szerokość określoną w atrybucie HTML (co nie zawsze jest równe 250 pikselom, to tylko przykład)? Mogę wybrać tabele, które nie powinny mieć nadpisanych szerokości za pomocą selektora #column1 table.

Answer 1

Spróbuj tego:

#column1 table { 
    width: auto; 
} 

Tak wiesz, css będzie zawsze zastępują starych atrybutów HTML inline. Zwykle jest to problem przy korzystaniu z edytora WYSIWYG.

Rozwiązałem ten problem dla starego html wygenerowanego przez edytor WYSIWYG w cms z javascript i jquery. I iteracyjne nad stołem (S) i odczytać wysokość i szerokość atrybut które następnie przekształcają się inline CSS:

var $table = $('#column1 table'); 
$table.css({ 
    "width" : $table.attr('width'), 
    "height" : $table.attr('height') 
}); 

Answer 2

Nie można zastąpić z css html ale można dodać atrybut style na przykład:

style = " width: 250px;" 

edit: można zastąpić ją na zewnątrz poprzez umieszczenie ważne na końcu reguły css, które będą się znosić wszelkie inne atrybuty CSS w stosunku do tego, czego zmienia!.

np

#column1 table { 
    width: 250px !important; 
} 

Answer 3

spojrzeć ten link .. http://www.w3schools.com/cssref/pr_dim_width.asp

W html umieścić Id tj

na stole, a następnie w css po prostu wykonaj

#TABLE1 
{ 
width:250; 
} 

Answer 4

Czy możesz nam powiedzieć, dlaczego używasz wbudowanych atrybutów html w ten sposób?

Jeśli nie masz bardzo silnego powodu, radzę przenieść dowolne elementy stylu do CSS. I jest o wiele lepiej, jeśli CSS ma własny plik, a nie jest również wbudowany.

Lepiej jest zawsze oddzielać treść od prezentacji.

Answer 5

Możliwą, choć niefortunną odpowiedzią, która przyszła mi do głowy, jest zastąpienie reguły dla selektora CSS table jednym z :not(#column1) table. Będzie to jednak działać tylko w niektórych nowoczesnych przeglądarkach, a nie w IE.

Answer 6

Jak stwierdzono, sugeruję, aby użyć do tego arkusza stylów! Po prostu zaimplementuj to w swoim stylu.css:

table { 
    width:250px; 
} 

, a jeśli nie wystarczy, możesz dodać!ważne, jak:

table { 
    width:250px !important; 
} 

i dodać stylów jak to w czołowej części swojej HTML:

<link rel="stylesheet" type="text/css" href="css/stlyes.css"> 

W przeciwnym razie trzeba by dodać style = "width: 250px" bezpośrednio do każdej tabeli . Jeśli chcesz ponownie zmienić szerokość, na przykład 260px, będziesz musiał zmienić wszystkie z nich ponownie.

Jednakże, jeśli masz dostęp do kodu HTML, robi Find-Wymienić będzie zalecane, mimo to mieć czysty kod. Prawie każdy, nawet bardzo proste TextEdit Programm powinien mieć opcję Find-Wymienić ...

Answer 7

wiem, że to pytanie zadano 2 lata temu, ale może to być pomocne dla innych, którzy mają podobne problemy. Można użyć selektora atrybutu CSS:

table:not([width]) { 
    width: 250px; 
} 

pamiętać, że nie będzie działać pod IE 9 o ile wiem.