[a.....3]

Cześć. Chcę, żeby zielony prostokąt pod tabelą był takiej samej długości jak wiersze w tabeli z kolumny "Ranking". Zielony prostokąt pod tabelą jest id=#rec1 z ustawionym width=100px; tak samo jak wiersze spod "Ranking" należące do klasy .bing są na width=100px;. Jednak nie są one tej samej długości. Dlaczego? Nawet po wywaleniu wszystkich paddingów nie są równe. Znalazłem tylko, że dobrze jest użyć box-sizing: border-box;, ale nie wiedząc czemu nie działa w moim Chromie 47. A o dziwo na fiddle działa. Wiem, że mógłbym się z tym uporać w sposób jak na gifie, ale zależy mi, rozwiązać ten problem zgodnie z pewnymi normami. :P

https://jsfiddle.net/u4s7xmk4/1/

Tu jeszcze całość kodu z załączonym

[baqz]

Domyślnie zielony #rec ma faktycznie 100px, a dokładniej jego content, natomiast dodanie do niego paddingu/bordera graficznie powiększy 100 pikselowy content o te wartości - chyba że będzie miał ustawionybox-sizing: border-box; Podobnie jest z kolumnami tabeli, ale tylko w przypadku algorytmu fixed, tj. table-layout: fixed; dla całej tabeli, w przeciwnym przypadku za liczenie geometrii bierze się automagiczny algorytm którego efekty czasami nie są tym czego się oczekiwało. Mam nadzieje że pomogłem