CSS only being applied to ONE table out of two on page
CSS only being applied to ONE table out of two on page
dromando
Posts: 3Questions: 2Answers: 0
Project background: a fund side project on analyzing certain sports data. Using Python, Jinja, Flask, SQLite for database.
My background: Relatively new to Python, not new to CSS but wouldn't call myself an expert by any means.
This is unlike any CSS problem I've dealt before. I'm trying to display two DataTables side by side on the same page. I've got them right now one under the other, with the same width and all. My first mission was to display them side by side, making each one smaller.
No matter what I try or how, I can only change the second table's width, not the first one. I've attached both my datatables and bootstrap CSS documents as TXT files. All changes I've tried making are in Chrome's/Safari's inspection tools, which I'm semi-competent with.
This is very very weird. Changes are being applied perfectly to the second table, but anything concerning the width of the first table isn't being applied. I can move it and change its float or position, but not make it one pixel narrower.
Here's how I'm importing in my HTML base file:
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/static/DataTables/datatables.css"/>
<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- DataTables -->
<script type="text/javascript" src="/static/DataTables/datatables.min.js"></script>
Answers
Could you link to the page so I can debug it live and offer some help please.
Allan
Thanks for your reply Allan. This is a local project for now. While I haven't been able to do it correctly yet, I did manage to get CSS applied to both tables by editing the actual files. Up until yesterday I was trying this in Chrome's web inspector. I'm curious as to why changes weren't being applied in Chrome but did reflect eventually when I changed the actual CSS file. Got any hints?
No idea I'm afraid. Chrome's live CSS updater is something I find really useful myself, I'm not sure why it wouldn't have worked for you.
Allan